Template:Circa/doc/sortable: Difference between revisions

From Zoophilia Wiki
Jump to navigationJump to search
meta>Wikid77
ce; @sort table added 4th row "c. 410"
Ookami (talk | contribs)
m 7 revisions imported
 
(2 intermediate revisions by one other user not shown)
Line 1: Line 1:
If the parameter "<code>sortable=yes</code>" is specified, the template generates invisible text that will cause the output to work in [[Help:Sorting|sortable]] [[Help:Tables|tables]], at the cost of causing problems for visually-impaired readers. Compare "Col&nbsp;1" and "Col&nbsp;2" in the following table:
If the parameter "<code>sortable=yes</code>" is specified, the template generates invisible text that will cause the output to work in [[Help:Sorting|sortable]] [[Help:Tables|tables]], at the cost of causing problems for visually-impaired readers. Compare "Col&nbsp;1" and "Col&nbsp;2" in the following table:


{| class="sortable"
{| class="sortable wikitable"
|-
|-
! Title!!Col 1!!Col 2
! Title!!Col 1!!Col 2
Line 7: Line 7:
| Foo|| style="text-align:right;" |1066|| style="text-align:right;" |1066
| Foo|| style="text-align:right;" |1066|| style="text-align:right;" |1066
|-
|-
| Bar|| style="text-align:right;" |{{circa}} 1510|| style="text-align:right;" |{{circa|1510|sortable=yes}}
| Bar|| style="text-align:right;" |{{ {{ROOTPAGENAME}}}} 1510|| style="text-align:right;" |{{ {{ROOTPAGENAME}}|1510|sortable=yes}}
|-
|-
| Baz|| style="text-align:right;" |1956|| style="text-align:right;" |1956
| Baz|| style="text-align:right;" |1956|| style="text-align:right;" |1956
|-
|-
| Jaz|| style="text-align:right;" |{{circa}} 410|| style="text-align:right;" |{{circa|410|sortable=yes}}
| Jaz|| style="text-align:right;" |{{ {{ROOTPAGENAME}}}} 410|| style="text-align:right;" |{{ {{ROOTPAGENAME}}|410|sortable=yes}}
|}
|}


"Col 1" uses <code><nowiki>{{</nowiki>{{circa}}<nowiki>}} 1510</nowiki></code>, and does not sort correctly. "Col&nbsp;2" uses <code><nowiki>{{</nowiki>{{BASEPAGENAME}}<nowiki>|1510|sortable=yes}}</nowiki></code>, and does sort correctly. This works because <code><nowiki>{{</nowiki>{{BASEPAGENAME}}<nowiki>|1510|sortable=yes}}</nowiki></code> inserts an invisible [[span and div|span element]] at the start of the cell: <code><nowiki><span style="display:none;">1510</span></nowiki></code>. Although it is not rendered, it is still seen by the sorting code and makes sorting work. The downside of this approach is that the invisible text is still rendered by [[screen reader]]s that are used by visually impaired readers, and by text browsers such as [[Lynx (web browser)|Lynx]], so the table will become garbled for readers who are using [[assistive technology]] or text browsers.<includeonly></includeonly>
"Col 1" uses <code><nowiki>{{</nowiki>{{ROOTPAGENAME}}<nowiki>}} 1510</nowiki></code>, and does not sort correctly. "Col&nbsp;2" uses <code><nowiki>{{</nowiki>{{ROOTPAGENAME}}<nowiki>|1510|sortable=yes}}</nowiki></code>, and does sort correctly. This works because <code><nowiki>{{</nowiki>{{ROOTPAGENAME}}<nowiki>|1510|sortable=yes}}</nowiki></code> inserts an invisible [[span and div|span element]] at the start of the cell: <code><nowiki><span style="display:none;">1510</span></nowiki></code>. Although it is not rendered, it is still seen by the sorting code and makes sorting work.
 
The downside of this approach is that the invisible text is still rendered by [[screen reader]]s that are used by visually impaired readers, and by text browsers such as [[Lynx (web browser)|Lynx]], so the table will become garbled for readers who are using [[assistive technology]] or text browsers.

Latest revision as of 00:53, 3 September 2020

If the parameter "sortable=yes" is specified, the template generates invisible text that will cause the output to work in sortable tables, at the cost of causing problems for visually-impaired readers. Compare "Col 1" and "Col 2" in the following table:

Title Col 1 Col 2
Foo 1066 1066
Bar c. 1510 1510 c. 1510
Baz 1956 1956
Jaz c. 410 0410 c. 410

"Col 1" uses {{Circa}} 1510, and does not sort correctly. "Col 2" uses {{Circa|1510|sortable=yes}}, and does sort correctly. This works because {{Circa|1510|sortable=yes}} inserts an invisible span element at the start of the cell: <span style="display:none;">1510</span>. Although it is not rendered, it is still seen by the sorting code and makes sorting work.

The downside of this approach is that the invisible text is still rendered by screen readers that are used by visually impaired readers, and by text browsers such as Lynx, so the table will become garbled for readers who are using assistive technology or text browsers.