Template:Circa/doc/sortable: Difference between revisions
From Zoophilia Wiki
< Template:Circa | doc
meta>It Is Me Here m + Space |
meta>WOSlinker tidy style for better HTML5 compatibility |
||
| Line 5: | Line 5: | ||
! Title!!Col 1!!Col 2 | ! Title!!Col 1!!Col 2 | ||
|- | |- | ||
| Foo|| | | Foo|| style="text-align:right;" |1066|| style="text-align:right;" |1066 | ||
|- | |- | ||
| Bar|| | | Bar|| style="text-align:right;" |{{ {{BASEPAGENAME}}}} 1510|| style="text-align:right;" |{{{{BASEPAGENAME}}|1510|sortable=yes}} | ||
|- | |- | ||
| Baz|| | | Baz|| style="text-align:right;" |1956|| style="text-align:right;" |1956 | ||
|} | |} | ||
"Col 1" uses <code><nowiki>{{</nowiki>{{BASEPAGENAME}}<nowiki>}} 1510</nowiki></code>, and does not sort correctly. "Col 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> | "Col 1" uses <code><nowiki>{{</nowiki>{{BASEPAGENAME}}<nowiki>}} 1510</nowiki></code>, and does not sort correctly. "Col 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> | ||
