Semantisches Benutzen römischer Ziffern mit CSS

Ich wollte doch nicht viel, nur die Darstellung von Zahlen mit römischen Ziffern auf einer Webseite. Klar, hätte ich einfach die Buchstaben I, V, X und so weiter verwenden können. Aber das ist nicht semantisch. Es muss doch auch mit CSS gehen, hab ich mir gesagt. Und nach einiger Recherche fand ich auch eine Lösung!

Romans #1
Romans #1 von [Duncan] (CC BY)

Christian Heilmann erklärte vor einigen Tagen, wie sich Listen gestalten lassen. Aber ich hab hier keine Liste vorliegen, sondern möchte meine Erkenntnisse der Vorlesungen auf einer Website festhalten.

Dabei kommen dann auch Fächer wie Analysis 1 bis 3 vor. Und die Ziffern hätte ich gerne in Römisch. Mit ein bisschen CSS-Getrickse geht es.

Zunächst einmal die Auszeichnung per HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Styling numbers in uppercase Roman</title>
  </head>
  <body>
    <ol>
      <li>Analysis 3</li>
      <li>Analysis 2</li>
      <li>Analysis 1</li>
    </ol>
  </body>
</html>

Wie zu sehen ist, gibt es eine geordnete Liste mit drei Elementen: Die Analysis-Vorlesungen in umgekehrt-chronologischer Reihenfolge.

Damit ich gezielt CSS dafür schreiben kann, brauch ich noch eine Klasse für den Selektor und ein Wrapper-Element (ein umschließendes Element, auf welches ich Definitionen anwenden kann). Der Code sieht dann so aus:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Styling numbers in uppercase Roman</title>
    <style>
      .body {
        counter-reset: analysis 4; /* Max+1 */
      }
      
      .roman {
        counter-increment: anaylsis -1;
      }
      
      .roman span {
        display: none;
      }
      
      .roman:after {
        content: counter(analysis, upper-roman);
      }
    </style>
  </head>
  <body>
    <ol>
      <li class="roman">Analysis <span>3</span></li>
      <li class="roman">Analysis <span>2</span></li>
      <li class="roman">Analysis <span>1</span></li>
    </ol>
  </body>
</html>

Okay, da ist also einiges dazu gekommen. Nehmen wir es einmal auseinander:

  1. Ich definiere mir einen Zähler (engl. Counter) namens analysis und setze den Anfangswert auf 4. Warum vier? Weil ich weiß, dass meine Liste drei Elemente besitzt.
  2. Als nächstes bestimme ich, dass bei jedem Auftreten der Klasse roman (CSS-Selektor .roman), der Zähler um -1 erhöht werden soll. Effektiv wird er also um 1 reduziert.
  3. Die in <span> gehüllte Ziffer wird ausgeblendet.
  4. Stattdessen wird per CSS am Ende des Inhalts von Elementen der Klasse roman per CSS Inhalt eingefügt: Der Wert des Zählers analysis mit der Darstellung upper-roman, also römische Großbuchstaben.

Wozu das ganze? Nun, jetzt wird einem blinden Besucher die Zahl vorgelesen, während ein sehender Besucher die Darstellung in einer Form wahrnimmt, wie ich es mir gewünscht habe 🙂

Advertisements

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s