Sonderzeichen in WordPress nutzen
Das Internet hat der Textgestaltung nicht gut getan. Zum Einen natürlich dadurch, dass lange Zeit nur wenige Schriften zur Verfügung standen, aber das ist Vergangenheit. Zum Anderen dadurch, dass Satzzeichen zwar oft an den richtigen Stellen landen, dafür aber oft die falschen Zeichen genutzt werden. Responsives Webdesign verschärft diesen Umstand noch dadurch, da Zeichen abhängig von der Breite des Satzspiegels in die falsche Zeile rücken, wenn sie nicht speziell behandelt werden. Zu Zeiten des Bleisatzes haben die Setzer die falschen Satzzeichen der Vorlagen automatisch gegen die richtigen getauscht. Auch in statischen Webseiten-Texten, die von Designern eingefügt wurden sind oft die richtigen Sonderzeichen. Seitdem aber Sonderzeichen in WordPress und anderen Content-Management-Systemen direkt von AutorInnen integriert werden, leidet zwar nicht zwangsweise die Qualität der Texte, oft aber die typographische Qualität durch den falschen Einsatz von Satz- und Sonderzeichen.
Mit dem folgenden Artikel möchte ich helfen, die wichtigsten Sonderzeichen zu finden und einzusetzen. Primär mit dem Blick auf WordPress, aber auch allgemein.
Sonderzeichen in WordPress finden? Fehlanzeige!
Viele der Sonderzeichen die ich hier vorstelle werden nicht einfach in WordPress oder gar in Word angeboten. Word ersetzt manches vielleicht noch automatisch, WordPress nicht.
Auf der Mac-Tastatur sind einige der Sonderzeichen über Tastenkombination direkt verfügbar, auf dem PC hab ich immer noch nicht rausgefunden, wie das eigentlich geht. Infos dazu gerne an abrinkmann@absichtbar.de!
Egal ob Mac, Windows-PC oder vielleicht auch Android-Tablet: Ich empfehle die Nutzung von Unicode-Zeichentabellen, um das korrekte Zeichen zu finden. Ich nutze diesbezüglich unicode-table.com. Allerdings ist die Suche dort bescheiden. Teilweise lohnt es sich, ein alternatives Wort oder gar die englische Suche zu nutzen, um das korrekte Zeichen zu finden. Auch der Name der HTML-Entity (dort als „Mnemonik“ bezeichnet) führt nicht zum Ergebnis.
Sonderzeichen in WordPress einfügen
Um im Gutenberg-Editor in dem visuellen Editor ein Sonderzeichen nutzen zu können empfiehlt es sich, das Zeichen aus der Unicode-Tabelle direkt über den „Kopieren“-Button in die Zwischenablage zu übernehmen und direkt einzufügen. Wenn die Zeichenketten der verschiedenen Schreibweisen kopiert werden, müssen Sie über den Code-Editor eingegeben werden, andernfalls stellt WordPress diese direkt als Text dar:
OberU+00ADweser­dampf\00ADschiff­fahrtskapitänspatentenurkunde
- Unicode-Nummer nach „Ober“
- HTML-Code nach „weser“
- CSS-Code nach „dampf“ (kommt in generated Content zum Einsatz)
- Mnemonic (auch als HTML-Entity bekannt) nach „schiff“
- das über den Button „kopieren“ kopierte Zeichen nach „fahrts“ –
je nach verfügbarem Platz der Zeile als Trennstrich, oder gar nicht angezeigt wird. Erst bei der Untersuchung des Quellcodes wird sichtbar, dass es sich dabei um das ­ handelt, das in diesem Fall aber nicht als solcher Text sichtbar wird.
Der Gedankenstrich
Wie oft stolpern Sie über eine Divis – wie der kurze Strich eigentlich heißt, der auch als „Spiegelstrich“ bekannt ist – statt über den korrekten Gedankenstrich? Kleiner Tipp: im vorherigen Schachtelsatz habe ich beim ersten Strich den korrekten Gedankenstrich, beim zweiten die Divis verwendet. Beim späteren Korrekturlesen wollte ich diesen Fehler automatisch beheben und konnte mich nur mit Mühe davon abhalten 😉
Faustregel: Wenn Leerzeichen davor und danach kommen, muss bei Buchstaben der lange Strich, der – Gedankenstrich her. Bei Zahlen und Uhrzeiten wird er für Bereiche N1–N2 oder 13:00–15:00 Uhr eingesetzt. Letzteres ist auf Öffnungszeiten-Schildern sehr oft falsch gesetzt.
Die Divis kommt zum Einsatz:
– Wenn es sich um eine Aufzählung handelt
– Wenn eine Wort-Kette gebildet wird
– Wenn ein Wort- oder Zeichenkettenteil gemeint ist
– Zwischen Doppel-Namen, auch bei Firmen-Bezeichnungen
Auf der Mac-Tastatur ist der Gedankenstrich durch zusätzliches Halten der Alt-Taste beim Drücken der Divis einfach zu erzeugen.
Der deutsche Gedankenstrich auf unicode-table.com – –
Der englische Gedankenstrich auf unicode-table.com — —
Genau genommen wird die Divis auch oft genug anstelle des Minus-Zeichens eingesetzt. Je nach Schrift können Plus und Divis zueinander passen oder nicht: +/-. Plus und Minus sollten es in der Regel tun: +/−.
Das mathematische Minus-Zeichen auf unicode-table.com − −
Aufgepasst: Viele Software-Anwendungen können mit den korrekten Minus- und Gedankenstrich-Zeichen nichts anfangen.
Der Dreipunkt oder „drei Punktführer“, auch Auslassungspunkte
Word korrigiert es meist selbst und erstellt aus drei einzelnen Punkten … das korrekte Zeichen „…“. Ob das Zeichen korrekt ist kann ganz einfach nachgeprüft werden: wenn beim markieren alle drei Punkte gemeinsam markiert werden ist es korrekt.
Der nicht brechende Bindestrich
Nicht jeder Bindestrich soll brechen! So habe ich 2014 bei der Versicherung HUK‑COBURG darauf geachtet, dass alle Vorkommnisse des Firmen-Namens auf der Webseite mit einem nicht brechenden Bindestrich versehen wurden, damit die beiden Wortteile immer zusammen in einer Zeile stehen.
Die HUK‑COBURG setzt die nicht brechenden Bindestriche aktuell leider nicht mehr ein.
Der nicht brechende Bindestrich auf unicode-table.com
Das nicht brechende – geschützte Leerzeichen
In der Geschichte des Internets hat das nicht brechende Leerzeichen eine besondere Stellung eingenommen: Bevor es bessere Möglichkeiten dafür gab wurde es öfter mal für Einrückungen zweckentfremdet.
Zum Einsatz kommen sollte ein nicht brechendes Leerzeichen vor allem, wenn – wie der Name sagt – an einer Stelle im Text kein Zeilenumbruch erfolgen sollte. Dies ist im vorangegangenen Satz zwei mal der Fall: jeweils das Leerzeichen vor dem Gedankenstrich ist als geschütztes Leerzeichen gesetzt, damit eine neue Zeile nicht mit einem Gedankenstrich beginnt.
Das geschützte Leerzeichen auf unicode-table.com
Das breitenlose Leerzeichen
Das Gegenteil von dem Leerzeichen, bei dem nicht umgebrochen werden soll, ist das Leerzeichen bei dem umgebrochen werden darf, das aber keinen Platz einnehmen soll. Der Unterschied zum weichen Trennzeichen, das im nächsten Abschnitt beschrieben wird ist vor allem, dass hier kein Bindestrich angezeigt wird wenn es zu einem Zeilenumbruch an dieser Stelle kommt.
Ich setzte dieses Zeichen zum Beispiel/beispielhaft da ein, wo ich Wörter/Geschriebenes mit einem Schrägstrich alternativ nutze. Das breitenlose Leerzeichen setze ich nach dem Schrägstrich/Slash um einen Umbruch an dieser Stelle zu ermöglichen – sofern er denn dort sinnvoll ist.
Die Wikipedia empfiehlt das breitenlose Leerzeichen auch im Einsatz von Social Media-Aktivitäten, wenn es z.B. gilt @absichtbars Benutzernamen grammatikalisch korrekt mit einem „s“ am Ende zu versehen, ohne dass die Zuordnung der Erwähnung durch z.B. Twitter darunter leidet.
Im Englischen als „Zero Width Space“ bezeichnet wird es auf Deutsch dort mit „Nullbreiten Raum“ übersetzt.
Das weiche Trennzeichen
Je nachdem, wie das CSS für einen bestimmten Bereich des Themes angelegt wurde, werden längere Wörter automatisch getrennt oder nicht.
Um „Sollbruchstellen“ in Wörtern zu erzeugen können bei bestimmten Wörtern jedoch auch weiche Trennzeichen eingesetzt werden.
Die HUK‑COBURG setzt die weichen Trennzeichen für die Labels bei „unsere beliebtesten Produkte“ auf huk.de ein.
Das weiche Trennzeichen auf unicode-table.com
Nachtrag vom 21.10.2020: parallel zu diesem Artikel habe ich an einer responsiven „Matrix zu geschlechtlichen, amourösen und sexuellen Vielfalt“ gearbeitet (die ich später hier verlinken werde). Als ich diese auf dem iPhone getestet habe war es eine sehr unschöne Entdeckung festzustellen: Unabhängig vom getesteten Browser (Chrome, Safari, Firefox) wurde die Breite des ­ dort nicht als Null, sondern als negative Trennstrichbreite berechnet! Mit anderen Worten: die Buchstaben vor und nach dem ­ haben einander überlappt!
Leider wird es jetzt schmutzig. Die einzige Lösung für dieses Problem war nämlich, dass ich den Wort-Teil vor dem ­ mit Textfarbe versehen habe. Dabei wird von WordPress ein <span> erzeugt. Bei längeren Wörtern außerdem den letzten Wortteil. Mit diesem Trick hab ich erreicht, dass die Trennstriche an den richtigen Stellen funktioniert haben und gleichzeitig keine Überlappungen von Buchstaben auf dem iPhone angezeigt wurden. Ich hoffe, dass dieser Bug von Apple bzw. Webkit bald entfernt wird!
Die gute Nachricht: Das Problem scheint nicht nur mit dem Betriebssystem zusammen zuhängen, sondern zusätzlich an der Schrift zu liegen. Es besteht also Hoffnung, dass Sie den oben genannten Hack nicht benötigen um ­ einzusetzen!
Hier für alle, die selbst testen wollen: diesen Abschnitt im Quellcode kopieren und auf der eigenen Webseite auf einer Testseite einsetzen.
Oberweserdampfschifffahrtsgesellschaftskapitänsmütze mit ­ und Oberweserdampfschifffahrtsgesellschaftskapitänsmütze zusätzlich mit <span>-Elementen.
Hinweis zur Nutzung dieser Sonderzeichen in CMS mit unterschiedlichen Ausgabe-Kanälen
Wenn Ihr Content-Management-System nicht nur Webseiten, sondern z.B. auch E-Books oder gar Print-Produkte mit Inhalten versorgt, klären Sie bitte vor der Nutzung der Sonderzeichen ab, ob diese in den anderen Kanälen ebenfalls zum gewünschten Ergebnis führen. Ggf. muss der Workflow vorab angepasst werden, damit die Sonderzeichen nicht in ihrer HTML-Code-Version mitten im Text stehen!
Update vom 21.10.2020: Kommata ergänzt und Abschnitt über das breitenlose Leerzeichen hinzugefügt.