Subscript

[wartburggraaf]

We willen graag meer leren over de Subscript component. In welke vorm, of vormen, wordt deze momenteel ingezet en toegepast binnen jouw organisatie?

Deel hieronder een link naar Figma, Storybook, Github of screenshots. Met deze informatie kunnen we bewijzen dat de component onderdeel moet worden van de NL Design System component library.

Daarnaast wordt het delen van onderzoek gewaardeerd. Dus heb je zelf onderzoek gedaan en zijn er inzichten voor dit component? Dan horen we dit ook graag!

Link naar bericht in Slack

Naam

Subscript

Doel

Toont tekst met een kleiner lettertype met een verlaagde letterlijn.

Gerelateerde componenten

Superscript

Onderzoek

Subscript and superscript - Wikipedia
Wikipedia pagina waarbij ook vele voorbeelden van gebruik worden beschreven.

<sub>: The Subscript element - MDN
Documentatie van Mozilla Developers Network over het <sub> HTML element.

Problems solved by OpenType | Roel Nieskens | CSS Day 2024 - Youtube
Riel Nieskens deelt een presentatie bordevol tips en toont onder andere hoe je super- en subscript in CSS kan gebruiken.

Brief Note on Super- and Subscript Text - Adrian Roselli
Adrian Roselli heeft onderzoek gedaan naar support voor Super- en Subscript door assistieve technologie.

[jeffreylauwers]

Utrecht

• Storybook
• Github

---

Screenshots / Varianten

Storybook

Default

Subscript inside multiple lines of text

Subscript with Open Type rendering, inside multiple lines of text

---

Notities

Documentatie aanwezig (Storybook)

[jeffreylauwers]

✨ Dit component is nu Help Wanted ✨

Help je mee hem door de Community stappen te krijgen?
Subscript op het Community bord

[rianrietveld]

Klein onderzoekje naar screenreader feedback op <sub>.
Zie ook vergelijkbare tekst bij de sup-discussie.

TL;DR: screenreaders geven geen info over sub of sub.

Alleen VoiceOver probeert er wat van het maken als deze de structuur herkent.
Dus 12 m<sup>2</sup> wordt als twaalf vierkante meter uitgesproken. Maar 3<sup>2</sup> wordt voorgelezen als 32.
NVDA wacht even voor het uitspreken van de sub en sup maar noemt alleen het nummer op.
JAWS negeert het volkomen en maakt het onderdeel van de tekst.
Dit valt dus in dezelfde categorie als <b> em <i>.
Alleen visuele informatie die niet wordt doorgegeven aan screen readers.
Ik zou deze component afraden voor content.
Zie voor testcode:
https://codepen.io/rianrietveld/pen/xxvPEar

Discussie met @Robbert
unicode karakters als m². VoiceOver leest 12² voor als “12 digit 2”. Zonder de sup-info.
We moeten de veelvoorkomende use cases uitsplitsen, en een advies moeten geven per onderdeel zoals:

• chemische formules: H2O
• wiskundige formules
  á la Julesprudentie
  H2O lijkt me bijvoorbeeld harmless, voor formules moeten we misschien figures + figcaption + mathml adviseren

Hidde:
Er zijn wel mappings in HTML-AAM (sub en sup), dus dit zijn screenreader bugs. Adrian heeft een issue gefiled bij JAWS, lijkt weinig te gebeuren.

Nadeel van geen component is denk ik dat als in de toekomst support beter wordt we geen updates aan een component kunnen doen? Maar niet echt een nadeel als het alternatief 'uitschrijven' is en dat ook gewoon goed genoeg werkt