Superscript

[wartburggraaf]

We willen graag meer leren over de Superscript 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

Superscript

Doel

Toont tekst met een kleiner lettertype met een verhoogde letterlijn.

Gerelateerde componenten

Subscript

Onderzoek

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

<sup>: The Superscript element - MDN
Documentatie van Mozilla Developers Network over het <sup> 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

Superscript inside multiple lines of text

Superscript 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?
Superscript op het Community bord

[rianrietveld]

Klein onderzoekje naar screenreader feedback op <sup>.
Zie ook vergelijkbare tekst bij de sub-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:

• vierkante en cubbice meters in m2 en m3, etc
• wiskundige formules
• voetnoot verwijzingen
  á la Julesprudentie
  H2O lijkt me bijvoorbeeld harmless, voor formules moeten we misschien figures + figcaption + mathml adviseren

Aan content managers adviseren de info uit te schrijven: twaalf vierkante meter, ipv 12m<sup>2</sup>.

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

[jeffreylauwers]

Anton Olivier noemde tijdens de Design Open Dag ook Copyright en Trademark als eventuele toepassingen.

https://www.dictionary.com/e/trademark-copyright-registered-symbols/