Geschrieben von Christian Schnettelker

Schlagwörter:

Webdesign-Tipps 9: WordPress-Editor generiert unerwünschte Zeilenumbrüche

Letzten Samstag Abend, während einer Zugfahrt zur Party nach Bochum, habe ich ein paar aktuelle und auch ältere Artikel meines Webdesign-Blogs hier gegen gelesen. Da ich natürlich keinen PC mitschleppe nutzte ich dazu mein Android-Handy und den dort installierten Chrome-Browser.

Mir sind dabei drei Dinge aufgefallen: erstens lädt das Handy die Seiten meist nur, wenn der Zug in einen Bahnhof einfährt, das muss wohl am Netzanbieter liegen. Zweitens durchkämmen immer mehr merkwürdige, ungepflegte Leute die Züge auf der Suche nach Pfandflaschen und Drittens – wesentlich gravierender: in praktisch jedem meiner Artikel finden sich ein oder zwei Zeilenumbrüche, wo eigentlich keine sein sollten.

Auf einem Smartphone fallen diese eher auf als am PC, vor dem ich normalerweise sitze, da es hier durch das schmale Display insgesamt wesentlich mehr Zeilenumbrüche gibt.

Dieses Problem hatte ich bereits im Artikel „WordPress 4.2 ohne Link-Titel“ vom 25. April angesprochen, es ist mir seit langem bekannt, aber ich konnte nie herausfinden, was die Ursache dafür ist.

Ob es an der vorgerückten Stunde, den ein oder zwei „gepflegten“ Bieren oder an den aufdringlichen Pfandflaschensammlern lag, die gierig auf meine fast leere Bierdose schielten, kann ich nicht mehr sagen – jedenfalls hat mich der Umstand dermaßen geärgert, dass ich mir schwor, gleich am nächsten Tag diesen „Augiasstall“ endlich auszumisten – kostete es, was es wolle und so möge es noch so lange dauern.

Problem

Gesagt, getan, keine 12 Stunden später und wieder vollständig ausgenüchtert untersuchte ich das Problem. Es entsteht, soviel hatte ich in den letzten zwei Jahren gelernt, beim (nachträglichen) Editieren bestehender Texte im WordPress-Editor („TinyMCE“) und äußert sich wiefolgt:

Unerwünschter Zeilenumbruch
Obiges Bild ist die Darstellung des Artikels „SEO? Nie gehört…“, vorletzter Absatz, in einer simulierten 320 Pixel breiten Smartphone-Anzeige. Eigentlich wäre genug Platz und das Wort „Webdesigner“ müsste noch in der ersten Zeile des Absatzes stehen. Sieht nicht gut aus…

Der Fehler, das hatte ich schon vor Jahren herausgefunden, lässt sich, einmal bemerkt dadurch korrigieren, in dem im WordPress-Editor alle um den unerwünschten Zeilenumbruch befindlichen Leerzeichen manuell neu gesetzt werden. Natürlich kann ich das unmöglich für alle ca. 150 Artikel meines Blogs hier machen und es dieses Vorgehen wäre ja auch nur eine Bekämpfung der Symptome.

Diese Art von falschen Zeilenumbrüchen verschwinden ebenfalls, wenn der gesamte Text durch Aus- und Einkopieren über z.B. den Windows Editor ausgetauscht wird, dabei gehen allerdings auch sämtliche Links verloren und das gesamte Unterfangen wäre ebenfalls eine „Sisyphusarbeit“ gewesen.

Diese „Lösungen“ scheiden also allesamt aus, denn, wie jemand einmal so schön sagte, sind es immer die halben Sachen, die Ärger machen, nie die ganzen. Trotzdem wurde mir durch die ersten Versuche klar, dass das Problem irgendwie mit „unerwünschten“ Steuerzeichen im Code zu tun haben muss, die ein ASCII-Editor herausfiltert.

Analyse

Die optische Untersuchung der fraglichen Stellen in den einzelnen Artikeln in WordPress zeigte jedenfalls keinerlei Auffälligkeiten, selbst dann, wenn man auf den Textmodus umschaltet. Auch eine Suche im Netz brachte keine neuen Erkenntnisse – vielleicht habe ich auch mit unpassenden Keywords gesucht, jedenfalls kam ich mit diesen Mitteln nicht weiter.

Ich griff also zu einem alten, bewährten Programmierer-Hilfsmittel: dem Hex-Editor. Im Jahre 2015 gibt es hier sogar Browser-Lösungen, entsprechend lud ich die html-Datei des befallenen Artikels in hexed.it hoch. Schnell war die fehlerhafte Stelle identifiziert:

Hex-code

Im obigen Screenshot ist die letztliche Ursache des Fehlverhaltens orange markiert; vom WordPress-Editor werden anscheinend – statt einem normalen Leerzeichen (0×20 / grün) – aus noch unbekanntem Grund sogenannte „Non-breaking spaces“ mit dem Hex-Code 0xC2A0 eingefügt. Die Hex-Werte stehen im Unicode für 0×00A0, dezimal 160, allgemein als „geschütztes Leerzeichen“ bekannt. In HTML erzeugt man ein solches gemeinhin mit  

Das Fiese ist nun: dadurch, dass der WordPress-Editor die geschützten Leerzeichen auf Byte-Ebene einfügt, sind sie hier von einem normalen Leerzeichen optisch nicht zu unterscheiden. Sie bewirken jedoch, dass der Browser zwischen den zwei damit verbundenen Wörtern keinen Zeilenumbruch durchführen darf / kann.

Da natürlich irgendwann letztlich doch ein Zeilenumbruch erfolgen muss bleibt, siehe erster Screenshot, dem armen Browser nichts anderes übrig, als eine Alternative zu finden. Er setzt den Umbruch also statt hinter „Webdesigner“ (darauf folgt ja ein zweites böses Leerzeichen) nun beim letzten regulären Leerzeichen vor dem Wort „Webdesigner“ – tata! Fehler gefunden.

Doch wie werde ich die ganzen „Non-breaking spaces“ in meinen 150 Artikeln wieder los, ohne sämtliche Texte manuell zu ändern?

Lösung

WordPress erlaubt netterweise die Programmierung und Einbindung von „Filtern“, diese befinden sich in der Datei functions.php des jeweiligen Templates.

Das Schreiben einer entsprechenden Funktion war kein großes Problem, allerdings musste ich mich erst im Netz kundig machen, mit welcher Syntax in PHP Hex-Werte austauschen werden können und auf welche Weise ein Filter bei WordPress „angemeldet / eingebunden“ wird. Hier meine fertige Funktion:

function clean_NonBreakingSpaces( $content ) 
   {
   $content = str_replace( "\xc2\xa0"," ",$content );
   return $content;
   }
add_filter( 'the_content','clean_NonBreakingSpaces' );

Der Filter tauscht vor der Anzeige des Artikels alle 0xC2A0 – Zeichenfolgen im Text („content“) gegen reguläre Leerzeichen aus, gewollte geschützte Leerzeichen in HTML, die als   geschrieben werden, bleiben dabei natürlich unbeeinflusst. Nachdem der Filter installiert und der befallene Artikel neu geladen wurde sah die oben bereits erwähnte Stelle jetzt wiefolgt aus:

Korrekter Umbruch
Hurra! Die bösen Leerzeichen sind zwar in der Datenbank weiterhin vorhanden, werden aber durch den Filter unschädlich gemacht.

Eine wirklich endgültige Lösung kann ich im Moment leider nicht anbieten, dazu müssten a) die störenden Leerzeichen in der Datenbank aus allen Artikeln entfernt und b) die Ursache im TinyMCE behoben werden. Mit der „kosmetischen“ Lösung ist mir persönlich aber erst einmal geholfen.

Das ganze Unterfangen hat ungefähr drei Stunden gedauert, ärgerlich fand ich abschließend nur, dass ich mich nicht schon viel eher des Themas angenommen habe.

Sabotage!

Fraglich natürlich auch, was das Ganze soll? Welchen unchristlichen Grund mag es geben, die Leerzeichen dergestalt auszutauschen und die Optik meiner mühsam erstellten segensreichen Artikel mutmaßlich zu sabotieren?

Entweder handelt es sich hier um einen Programmierfehler, der seit Jahren noch niemanden aufgefallen ist, oder es ist eine dieser superschlauen sozialistischen „Nanny-Funktionen“, die zwar gut gemeint sind, einem das Leben aber unnötig schwer machen.

Im Artikel „TinyMCE and the non-breaking space problem“, den ich nach Identifizierung der Problematik fand, wird dann auch erklärt, dass der Editor zwei oder mehr nebeneinander befindliche Leerzeichen automatisch in eben jenen bösen Code verwandeln würde; ich bin mir aber ganz sicher, dass ich beim Editieren bestimmt keine doppelten Leerzeichen hatte – dazu bin ich zu pingelig.

Gibt es vielleicht ein unkompliziertes Update für den TinyMCE, der verhindert, dass bei neuen Artikel immer diese kleinen Bomben eingebaut werden? Oder existiert ein Plugin, welches die Datenbank von den bösen Leerzeichen säubert? Warum hat eine Bierdose ein Pfandsiegel, Erfrischungsgetränke ohne Kohlensäure aber nicht?

Es bleiben also viele Fragen, falls Sie hierzu etwas sagen können, bin ich gespannt.

Neues von der Nanny

Beim Schreiben dieses Artikels sind mir einmal mehr unangenehme Nanny-Funktionen in WordPress aufgefallen, die ich nicht bestellt habe, die meine Arbeit nur behindern und wo ich nicht weiß, wie ich diesen Mist abstellen kann.

So wird aus 0×20 (0 plus der Buchstabe x, eine übliche Kennzeichnung für hexadezimale Werte) aus dem x ein Multiplikationszeichen, da die WordPress-Nanny anscheinend davon ausgeht, dass ich völlig schwachsinnig bin und eigentlich eine Multiplikation meine.

Die Textfolge 0xC2A0 bleibt wiederum netterweise unkorrigiert, die Nanny erkennt hier keine vermeintliche Multiplikation – dankeschön, sieht insgesamt wirklich super aus! Die Kommandos

remove_filter( 'the_content','convert_chars' );
remove_filter( 'the_content','wptexturize' );

in der functions.php habe ich bereits probiert, keine Wirkung. In der /wp-includes/formatting.php möchte ich nichts ändern, da ich bei jedem Update den Vorgang wiederholen müsste. Wie kann ich diese Nanny dauerhaft unschädlich machen, wer weiß Rat?

Pin on PinterestShare on FacebookTweet about this on TwitterShare on Google+Share on LinkedIn

Kommentare

Kommentare

  1. Daniel schrieb:

    Danke man, genau dieses Problem plagt mich auch schon seit Tagen.

    Hast du vielleicht auch deine Beiträge mit Word oder einer anderen Dokumenten Software vorgeschrieben? Dachte eigentlich, dass das zu dem Problem führen würde.

    Hast du vielleicht mittlerweile schon eine endgültige Lösung gefunden die diese „bösen“ Zeilenumbrüche komplett entfernt?

  2. Daniel schrieb:

    Falls es dich noch interessiert:

    Hab jetzt auf der Seite https://www.netzblogr.com/remove-tinymce-nbsp ein ideales Plugin für eine dauerhafte Lösung gefunden.

    Dazu muss ich bei mir nur das Plugin aktivieren und alle Beiträge anschließend einmal einzeln aktualisieren.

    Beste Lösung, die es wohl zur Zeit gibt. Zwar etwas umständlich bei vielen Beiträgen, dafür scheint die Lösung aber von Dauer zu sein. Auch nach Deaktivierung des Plugins.

Kommentar schreiben

Allgemeiner Hinweis: Bitte kommentieren Sie zum Thema unter Vermeidung von Allgemeinplätzen und Einzeilern. Eine korrekte Rechtschreibung wird erwartet.

Hinweis für SEO-Kommentarschreiber: alle Links sind nofollow und steigern Eure Linkpopularität nicht. Die Kommentare werden moderiert, offensichtliche SEO-Kommentare nicht veröffentlicht.