Jump to content

Module talk:Clade

Page contents not supported in other languages.
From Wikipedia, the free encyclopedia
This is an old revision of this page, as edited by Peter coxhead (talk | contribs) at 17:42, 31 July 2018 (→The future of cladex). The present address (URL) is a permanent link to this revision, which may differ significantly from the current revision.

Problem in Firefox

@Peter coxhead and TheDJ: There is an issue in cladograms made with clade when using Firefox. The bottom branch of a set of child nodes is sometimes missing the vertical line, but not always. For example, see Canidae#Phylogenetic relationships, where a clade of jackals and some foxes are left marooned from the tree. The cladogram appears fine in Chrome and Edge.

  • The issue seems to arise from a change made to the CSS styling in July, which replaced the deprecated margin and cellspacing parameters.
  • The cladogram can be fixed by using the prototype cladeN (which still uses cellspacing and margin) on the relevant nodes, so it is not due to a change in how Firefox renders the table HTML.
  • If I change the line thickness to 2 the line missing line appears as single thickness while the others are double thickness as expected.

I don't want to revert the change to use the deprecated code as this would be a retrograde step, but I am at a loss as to how to fix the problem. Any ideas?   Jts1882 | talk  10:45, 25 November 2017 (UTC)[reply]

It looks like the addition of "border-collapse:collapse;" to the table is the cause. Removing it restores the line using Inspect Element in the browser. I assume this means that the cell border, which draws the line, is collapsed with the row border that has zero thickness.   Jts1882 | talk  11:37, 25 November 2017 (UTC)[reply]
We had an edit clash.
Using Firefox on a Mac, the lines don't disappear, but they are extra thin.
CSS border-collapse was known not to work properly in Firefox in the past (see e.g. here) but I thought this was fixed. It appears that in some cases it isn't. Peter coxhead (talk) 11:49, 25 November 2017 (UTC)[reply]
Yes, that fixes it. Clearly Firefox still has a problem with border-collapse. Good work! Peter coxhead (talk) 12:38, 25 November 2017 (UTC)[reply]

Templatestyles and other changes

WP:TemplateStyles was enabled today. This allows custom CSS styling to be used with templates. I have implemented this on the {{cladeN}} and {{cladeNx}} templates. The latter implements {{cladex}} using the Lua module. The advantages seem to be:

  • Cleaner and easier to read styling code. Only the borders are used in the inline styles now
  • Possibility of custom styling for mobile view.
    • The broken bar brackets in {{cladex}} cladograms in the mobile view behave differently in the module version ({{cladeNx}}). The spaces between the bars are no longer there, but the vertical alignment is slightly off in some views. Reduce the size (with Ctrl-minus) and they realign. This is due to border-collapse (alignment is restored when removed with the Inspect Element tool).   Jts1882 | talk  10:26, 20 July 2018 (UTC)[reply]
  • Potential to modify for different skins (this is a planned update for templatestyles).
  • Smaller transclusion size. It looks like the size for large templates is reduced 25-33%

Examples can be found here:

I should add that I have been testing this using my custom.css, anticipating it's introduction today. It looks very promising although a few minor issues with the CSS need fixing. The alignment of dummy clades (those with a single element) is one issue.

I have also made a few other changes to the module code. It now runs a preprocessing loop to get the number of child branches. This means the final cell (containing the sublabel) can be place at the end of each child element rather than at the beginning of the next one or the end of the main loop as before. I've also cleaned up the module code of a lot of redundant commented out code that I left to show how things had changed from the old template language version. Now I understand what is going on I have replaced this with more informative comments.

Any comments or suggestions would be welcomed.   Jts1882 | talk  12:31, 19 July 2018 (UTC)[reply]

TemplateStyles, the nowiki tag and extra whitespace lines

The insertion of TemplateStyles in the template caused a small downward shift of branches. This was immediatedly apparent on dummy clades (a clade with one branch introduced for format the horizontal spread) (see top branch in User:Jts1882/sandbox/test/Passeriformes). The properties were as follows:

  • Adding the TemplateStyles tag introduces a downward shift of about 0.3em. This is not very obvious in the clades with two or more branches.
  • It doesn't occur if the nowiki statement is removed from the template.
  • The nowiki statement introduces the following before the clade table. The class sets style display:none.
<p class="mw-empty-elt"></p>
  • Templatestyles inserts a link element in this paragraph tag (see below), but crucially removes the no display class.
<p><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r850993194"></p>
  • Thus it appears that the display of this paragraph causes the shift. If the "mw-empty-elt" class is added using the browser Inspect Element tool the shift is removed.

The solution might be using the module to add the equivalent of what is added by the nowiki tag.   Jts1882 | talk  15:41, 19 July 2018 (UTC)[reply]

Adding a p tag with the "mw-empty-elt" class inside the module appears to fix the issue. Now need to recreate the extra line problem that required the nowiki tag addition, to see if this is an appropriate solution.

Conclusion The nowiki tag in the template is not necessary when using TemplateStyles. It turns out that prefixing the invoke with TemplateStyles has the same effect as the nowiki tag and prevents the insertion of the unexpected whitespace.   Jts1882 | talk  06:55, 20 July 2018 (UTC) .[reply]

The future of cladex

I have implemented a module version of {{cladex}} in {{cladeNx}}. This had the benefit of fixing the breaks in the right hand bars in the mobile view. Some examples and links to the originals can be found in User:Jts1882/sandbox/test/cladex.

The crucial difference in cladex was including the width:100%; style. This meant that it would stretch the cladogram across the page unless used in container (e.g. {{cladogram}}, {{bar label}}). The mixing of the {{clade}} and {{cladex}} templates was often a cause of confusion.

One solution was to use width:100%; in both and just add width:auto; the outer clade element. This works well enough as the outer element usually had some styling for line-height and font-size. The problem is that this would widen all the exisiting cladograms to fill the page.

TemplateStyles allows a CSS solution. It allows width:auto; to be set for the outer clade only. The CSS selector can set width:100%; on all table.clade elements contained in a table.clade element. Using this approach clade behaves like cladex except for the outer clade element. I think this is the desired solution.   Jts1882 | talk  13:34, 21 July 2018 (UTC)[reply]

@Peter coxhead:. Can you please have a look at this and confirm that it works as I've stated. I've tested the new versions in Firefox, Chrome and Edge in Windows 10, but don't have any Apple devices.   Jts1882 | talk  15:59, 21 July 2018 (UTC)[reply]
@Jts1882: I've discovered to my cost in the past that testing {{clade}}, {{tl|cladex}] and {{barlabel}} is tricky: they work on all the examples you try and then someone finds a new case where they don't!
I globally changed "cladex" to "cladeNx" at User:Peter coxhead/Test/Clade. Using Firefox, with one exception, {{cladeNx}} appears to work correctly where I would expect it to. I put back the one example where there's an issue. Compare User:Peter coxhead/Test/Clade#Petter's Example with cladex and User:Peter coxhead/Test/Clade#Petter's Example with cladeNx.
  • {{cladeNx}} cures the extra blank line between the terminals "Medoevia" and "Koharolepis".
  • However, it aligns the four terminals starting with "Jarvikina" wrongly – it looks as if it centres them rather than left-aligning them.
This is because it is mixing {{cladeNx}} and {{clade}} (which doesn't use TemplateStyles). If you use {{cladeN}} instead of {{clade}} (i.e. both using TemplateStyles) this works. In particular the table cell with Jarvikina inherits the CSS styling from table.clade td rather than using the default left align expected when using {{clade}}. This mixing caused a number of strange formatting effects, but as long as everything uses TemplateStyles it seems to work.   Jts1882 | talk  08:57, 22 July 2018 (UTC)[reply]
Given that the aim has to be to get rid of the need to use both {{clade}} and {{cladex}}/{{cladeNx}} and just use {{clade}}, I tried replacing {{clade}} by {{cladeNx}} everywhere on the page. The only problem was at examples like the one I've left at User:Peter coxhead/Test/Clade#Example 0. When I mix {{clade}} and {{cladeNx}}, it works fine, but when I use only {{cladeNx}}, the vertical bar is in the wrong place.
This is because {{cladeNx}} adds the width:100% and forces the {{cladex}} behaviour, which was why it needed to be used in a container or with an outer {{clade}} element. If you use {{cladeN}} for all elements the bar is in the right place as it will use width:auto for the outer element and width:100% for the rest, whick mimics the effect of a cladogram using {{clade}} for the first element and {{cladex}} for the rest. I think this is the correct behaviour for backward compatibity. {{cladeNx}} will provide backward compatibility with {{cladex}} and cladograms using only {{cladex}} will be stretched, i.e. existing cladograms using {{cladex}} should appear the same way. The difference comes when {{cladeN}} is used in place of {{clade}} as now the bars are correctly placed and there should be no need to use mix templates.   Jts1882 | talk  08:57, 22 July 2018 (UTC)[reply]
Browser tests (latest MacOS versions in each case)
If you don't see the issues I've noted above with your system and browsers, let me know and I'll upload screen shots. Peter coxhead (talk) 08:16, 22 July 2018 (UTC)[reply]
@Peter coxhead: See two comments above addressing non-MacOS cases. I cannot test these MacOS examples, but I think the problems you see in those examples are due to mixing {{cladeNx}} and {{clade}}. Hopefully the issues will be fixed if you use {{cladeN}} instead of {{clade}} so all elements use TemplateStyles.   Jts1882 | talk  08:57, 22 July 2018 (UTC)[reply]
@Jts1882: Yes – User:Peter coxhead/Test/CladeN uses only {{cladeN}} and works fine under MacOS in Firefox, Safari, Opera and Chrome. Great!
So, what's the next move? Why not redirect {{clade}} and {{cladex}} to {{cladeN}}, given that two variants aren't needed now? Peter coxhead (talk) 05:54, 23 July 2018 (UTC)[reply]

@Peter coxhead: I think {{clade}} and {{cladex}} should be changed to use the code in {{cladeN}} and {{cladeNx}}. The redirects would add to the translusion depth and the cladeN template/module complex is useful for development and testing. I can make all the changes except to {{clade}}, which requires template editor rights. To avoid any transitional effects (with the module template mismatches), I'd suggest the following:

  1. Update {{clade}} and {{cladex}} to use the exact code in {{cladeN}} and {{cladeNx}} (they would temporarily be using the sandbox module).
  2. Update Module:clade to the new code in the sandbox module.
  3. Change {{clade}} and {{cladex}} to use the main module.
  4. Create the stylesheet for {{clade}} and update the two templates. When I created the stylesheet before using TemplateStyles there was content-style problem that blocked editing. This might have been resolved, but I'm not sure.

This should make the change seamless. Then I can have a go at updating the documentation.   Jts1882 | talk  06:57, 23 July 2018 (UTC)[reply]

@Jts1882: what is the point of retaining two templates, {{clade}} and {{cladex}}? I created the latter solely because of the template depth issue – adding any extra features to the then version of {{clade}} caused it to fail on some existing very deep cladograms. There's no need for two templates now, surely? Peter coxhead (talk) 11:12, 23 July 2018 (UTC)[reply]
@Peter coxhead: I was thinking solely of backward compatibility as there is extensive legacy use of {{cladex}}. Some cladograms may deliberately use {{cladex}} on the outer clade to stretch the cladogram to full width. If you don't think this is necessary then {{cladex}} can redirect to an updated {{clade}} and then be gradually phased out. The extra transclusion level shouldn't matter as existing {{cladex}} cladograms won't be as deep as {{clade}} now allows.   Jts1882 | talk  11:57, 23 July 2018 (UTC)[reply]
@Jts1882: as far as I know, {{cladex}} is only used to get the extra features that used not to be in {{clade}}. I hoped that it could have been removed once {{clade}} was converted to Lua, but the the problem was the alignment and blank line issues which you've now sorted out. I would go for complete conversion:
Peter coxhead (talk) 14:15, 23 July 2018 (UTC)[reply]
P.S. if any of this requires rights you don't have but I do, let me know. Peter coxhead (talk) 14:16, 23 July 2018 (UTC)[reply]
@Peter coxhead: Agreed, except for deletion of {{cladeN}}. I use the latter for testing the sandbox version of the module. It's not used in the main space.
I cannot edit the {{clade}} template as that requires template editor rights. I would suggest doing this in three steps so as not to disrupt main space articles during the change.
  1. Copy the contents of thhe {{cladeN}} template over to {{clade}} template. The latter will temporarily uses the sandbox module and CSS styling. You will need to do this step because of the template protection. The {{cladex}} redirect should be made at the same time.
  2. Update the module code and add the styling subpage for the clade template.
  3. Edit the {{clade}} template to use the updated module and styling subpage. Again, you will need to do this.
I think this will allow the change without disrupting articles while the template expects different versions of the module functions.   Jts1882 | talk  14:50, 23 July 2018 (UTC)[reply]
@Peter coxhead:. I'm not sure if you've seen my previous message or are just to busy. I'd like to make the changes myself, but unfortunately I don't have template editor rights so need some help with the changes.   Jts1882 | talk  15:20, 31 July 2018 (UTC)[reply]
@Jts1882: I have been busy, but can you do (2)? If you confirm yes, I'll do (1) and then afterwards you do (2) and I'll do (3). Peter coxhead (talk) 17:42, 31 July 2018 (UTC)[reply]
Retrieved from "https://en.wikipedia.org/w/index.php?title=Module_talk:Clade&oldid=852832464"