CSS mit scharfem S

Mit einer Änderung des amtlichen Regelwerks für die deutsche Rechtschreibung darf man nun auch das Eszett, das „scharfe S“ als Großbuchstabe offiziell verwenden. Auch in Windows, Mac OS X Co. kann man das Versal-Eszett schon eingeben, sofern man sich die verschiedenen Tastaturkombinationen merken kann. Doch inwiefern lässt sich das Versal-Eszett auch auf Webseiten oder in E-Books richtig darstellen?

Unicode

Bereits 2008 fand das Versal-Eszett Eingang in den Unicode-Standard. Mit der Entität ẞ lässt sich das große Eszett in HTML und XML kodieren und in Web-Browsern und E‑Book-Readern darstellen, sofern die Schrift die Glyphe enthält.

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title></title>
  </head>
  <body>
    <p>KLO&#x1e9e; MIT SO&#x1e9e;</p>
  </body>
</html>

Diese Form der „harten“ Kodierung bedeutet dennoch einen destruktiven Eingriff in den Text. Die Ersetzung durch Großbuchstaben lässt sich nachträglich nicht einfach zurücknehmen, da man nicht mehr zweifelsfrei zwischen Akronymen und einfacher Versal-Auszeichnung unterscheiden kann. Flexibler ist die Auszeichnung mittels CSS, da dort die Formatierung getrennt vom Inhalt geschieht und leicht zu ändern ist.

Mit den CSS-Eigenschaften text-transform:uppercase kann man Versalien und mit font-variant:small-caps Kapitälchen einstellen. Allein ein Versal-Eszett wird man mit diesen Einstellungen selten zu Gesicht bekommen, da die Standardschriften von Web-Browsern und E‑Book-Readern meistens ein Doppel-S vorsehen.

OpenType Features

Wie gelangt man nun zum Versal-Eszett mit CSS? Bei ausgewählten Schriften muss man dafür nicht viel tun. So schaltet die Schrift Linux Libertine automatisch bei Kapitälchen auf das Versal-Eszett um. Dies funktioniert mit den sogenannten OpenType Features: Für bestimmte Schriftschnitte und Kontexte können alternative Glyphen definiert werden. So enthält die Linux Libertine das smcp-Feature für Kapitälchen, wo auch für das kleine Eszett eine alternative Glyphe hinterlegt wurde. Mit CSS müssen nur noch Kapitälchen aktiviert werden, entweder über font-variant:small-caps oder explizit über die Angabe des OpenType-Features.

.smallcaps {
  font-variant-caps: small-caps;
  font-feature-settings: "smcp";
}

Das Wort Maßstab in der Linux Libertine einmal normal und in Versalien gesetzt.

Bei der Linux Libertine funktioniert dies leider nur bei Kapitälchen und nicht bei Versalien. Allerdings kann man sich hier mit einem kleinen CSS-Hack behelfen. Erstmal stellen wir mit font-variant:small-caps die Kapitälchen ein und erhalten unser Versal-Eszett. Nun setzen wir einfach den Text via text-transform auf den Wert lowercase um Großbuchstaben auf die x-Höhe zu bringen. Anschließend kann man mit font-size wieder den Schriftgrad behutsam anheben.

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title></title>
    <style type="text/css">
      @font-face {
                 font-family: 'LinuxLibertine';
                 src: url('LinLibertine_R.otf') format('opentype');
                 }
      .linuxLibertine {
                 font-family:'LinuxLibertine';
                 font-variant:small-caps;
                 text-transform:lowercase;
                 font-size:1.2em
        }
    </style>
  </head>
  <body>
    <p class="linuxLibertine">Maßstab</p>
  </body>
</html>

Aus typografischer Sicht ist diese Methode jedoch nicht über jeden Zweifel erhaben. Mit der Skalierung wird auch das Schriftbild der Kapitälchen breiter und es kann der Eindruck einer Fettung entstehen. Daher sollte man die Schrift nicht bis zur ursprünglichen Versalhöhe skalieren. Versalsatz wirkt nicht zuletzt ansprechender, wenn er die originale Versalhöhe der anderen Buchstaben leicht unterschreitet.

Versal-Eszett mit CSS

Letztlich gibt es bisher nur wenige Schriften, die automatisch von Eszett auf dessen Versalie umschalten. Verfügt die Schrift aber wenigstens über die Glyphe, so kann man sich mit einem weiteren Hack behelfen. Zunächst kann man mit XSLT alle Eszett mit einem span auszeichnen. Gleich danach erzeugt man einen weiteren span als leeren Platzhalter. Mit display:none wird das kleine Eszett ausgeblendet und im Platzhalter-span das große Eszett mit CSS-Bordmitteln erzeugt.

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title></title>
    <style type="text/css">
  .versal {
     text-transform:uppercase;
       }
  .versal .eszett{
     display:none;
       }
  .versal .platzhalter:after{
      content:'&#x1e9e;';
       }
    </style>
  </head>
  <body>
    <p class="versal">Spitzkopf-Flossenfu<span class="eszett">ß</span><span class="platzhalter"/></p>
  </body>
</html>

Diese Methode funktioniert zuverlässig in den gängigen Web-Browsern. Aktuelle E‑Book-Reader sollten kein Problem darstellen, sofern Sie die verwendeten CSS-Properties implementieren. Ältere E‑Book-Reader bleiben hier außen vor, da für diese schon text-transform:uppercase eine unüberwindbare Hürde darstellt.

Was die Barrierefreiheit betrifft, kann das Ausblenden und Einfügen von Inhalten ein Problem darstellen. Via CSS ausgeblendete Inhalte werden vom Screenreader nicht vorgelesen. Manche Screenreader haben dann das Problem, dass Sie mit CSS erzeugten Text nicht vorlesen können. Damit das Eszett noch vorgelesen wird, kann man es auch alternativ mit position:absolute; top:-9999px; left:-9999px; aus dem Bildschirmbereich schubsen.

Last but not least muss der Screenreader schlichtweg das Versal-Eszett erkennen. Bei OpenType-Features ist das kein Problem, da einfach nur das kleine Eszett durch eine andere Glyphe substituiert, aber nicht umkodiert wird. Beim Unicode-Eszett sieht es leider nicht so rosig aus: Die blecherne Stimme des NVDA Screenreader liest beispielsweise statt dem Versal-Eszett einfach nur hastig dessen Hex-Adresse vor. (insert sad smiley here)

CSS mit scharfem S

Unicode

OpenType Features

Versal-Eszett mit CSS

Archiv

Tags