"Lücke" auf der Eingangsseite

    Nach der Umstellung von Bonaventura (http://www.vigilie.de) auf ein neues Theme (Twenty Sixteen) habe ich das Problem, dass bei mir nach dem Neuladen (Strg+F5) der Seite im Firefox (und soweit ich sehe nur dort) im zweiten Artikel reproduzierbar eine Lücke auftritt:

    Ich habe inzwischen herausgefunden, dass diese Lücke mit der automatischen Silbentrennung zusammenhängt, verstehe aber nicht wie.

    Code
    .entry-content {
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

    Wenn ich das Bild aus dem Posting herausnehme, taucht auch die Lücke beim Neuladen nicht auf. Es gibt nur diese eine Lücke; sie ist immer an derselben Stelle. Sie taucht nicht auf den Folgeseiten auf, sondern nur beim ersten Laden auf der Eingangsseite. Nach dem normalen Neuladen der Seite (F5) verschwindet die Lücke. Das erneute Laden am Cache vorbei (Strg+F5) reproduziert die Lücke an derselben Stelle zuverlässig.

    Meine Bitte und Frage:

    1. Könnt Ihr bitte schauen, ob dieses Phänomen nur bei mir auftritt oder auch bei Euch. Bitte Rückmeldung nach Möglichkeit mit Angabe des verwendeten Browsers.

    2. Hat irgendwer eine Ahnung, woran das liegen und wie man das abfangen könnte?

    Meinen Dank im Voraus an alle, die mir eine Rückmeldung geben.

    Gruß, Marius

    • Gerade eben
    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

    Erweitere die CSS Regel um folgende zwei Einträge:

    Code
    -webkit-font-variant-ligatures: no-common-ligatures;
font-variant-ligatures: no-common-ligatures;

    Der Chrome Browser unterstützt derzeit hyphens:auto nicht.

    WordPress ist "frei" wie in Freiheit es zu nutzen, aber nicht im Sinne von Freibier. Wer also glaubt man bekommt rund um WordPress alles kostenlos, der irrt. Hilfe ist ein Geschenk für das man sich bedankt, dafür gibt es den 'Gefällt mir' Button. Wer das nicht kann und sich selbst nicht zu helfen weiss, muss sich bezahlte Unterstützung suchen.

    Einmal editiert, zuletzt von mensmaximus (2. August 2016 um 12:53)

    Hmmm, wenn ich die Seite mit STRG+R im FF neu lade ist alles gut.

    WordPress ist "frei" wie in Freiheit es zu nutzen, aber nicht im Sinne von Freibier. Wer also glaubt man bekommt rund um WordPress alles kostenlos, der irrt. Hilfe ist ein Geschenk für das man sich bedankt, dafür gibt es den 'Gefällt mir' Button. Wer das nicht kann und sich selbst nicht zu helfen weiss, muss sich bezahlte Unterstützung suchen.

    Erst nach meiner Ergänzung oder schon davor? Bei mir ist die Lücke immer noch vorhanden. Ich habe inzwischen auch den Browser-Cache mal gelöscht. :-(

    Nach der Änderung. Beim Neuaufruf ist die Lücke aber weiterhin zu sehen. Ich würde sowieso auf die CSS Silbentrennung verzichten ebenso auf word-break Eigenschaften. Ich verwende dafür eine angepasste Version des Hyphenator Scripts mit manueller Einbindung in WordPress.

    WordPress ist "frei" wie in Freiheit es zu nutzen, aber nicht im Sinne von Freibier. Wer also glaubt man bekommt rund um WordPress alles kostenlos, der irrt. Hilfe ist ein Geschenk für das man sich bedankt, dafür gibt es den 'Gefällt mir' Button. Wer das nicht kann und sich selbst nicht zu helfen weiss, muss sich bezahlte Unterstützung suchen.

    So, nun habe ich es mal bei verschiedenen Fenstergrößen im FF probiert. Die Lücke tritt bei verschiedenen Fensterbreiten an unterscheidlichen Stellen auf. Es können auch Lücken im ersten und zweiten Posting auftreten.

    https://github.com/mnater/Hyphenator

    Mit dem MergaAndPack Tool erstellst Du Dir Deine persönliche Version.

    Ich lege die Datei dann in ein Unterverzeichnis /hyphenator in einem Child Theme und lade es mit folgender Funktion in der functions.php des Child Themes:

    Code
    add_action( 'wp_enqueue_scripts', 'mmx_load_hyphenator', '99' );
function mmx_load_hyphenator() {
    wp_enqueue_script( 'hyphenator', get_stylesheet_directory_uri() . '/hyphenator/hyphenator.js');
}

    Die CSS Klasse, die ich im MergeAndPack auswähle, ergänze ich dann um

    CSS
    -webkit-font-variant-ligatures: no-common-ligatures !important;
font-variant-ligatures: no-common-ligatures !important;

    Sonst gibt es Probleme bei der Anzeige von Trennungen mit allen Apple Endgeräten bei Verwendung von Webfonts.

    WordPress ist "frei" wie in Freiheit es zu nutzen, aber nicht im Sinne von Freibier. Wer also glaubt man bekommt rund um WordPress alles kostenlos, der irrt. Hilfe ist ein Geschenk für das man sich bedankt, dafür gibt es den 'Gefällt mir' Button. Wer das nicht kann und sich selbst nicht zu helfen weiss, muss sich bezahlte Unterstützung suchen.

    Hatte ich früher im Einsatz. Da es aber nur selten gepflegt wird (3 Jahre ohne Updates) und auch nicht WordPress Konform geschrieben war, mache ich es jetzt per Hand. Das ist auch deutlich performanter. Du muss Deine CSS Regeln natürlich entfernen (hyphen, word-break) da der Hyphentor einen Fallback hat und sich abschaltet wenn er die CSS Regeln erkennt.

    WordPress ist "frei" wie in Freiheit es zu nutzen, aber nicht im Sinne von Freibier. Wer also glaubt man bekommt rund um WordPress alles kostenlos, der irrt. Hilfe ist ein Geschenk für das man sich bedankt, dafür gibt es den 'Gefällt mir' Button. Wer das nicht kann und sich selbst nicht zu helfen weiss, muss sich bezahlte Unterstützung suchen.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden