Support » Plugin: wp-Typography » Unerwünschte Silbentrennung im Hauptmenü unterbinden

  • Resolved zonebattler

    (@zonebattler)


    Hallo Peter,

    ich erlebe bei mehreren meiner WordPress-Sites, zum Exempel in

    http://www.fuerthwiki.de/verein/

    die mit leicht modifizierten Versionen des alten “Twentyten”-Themes laufen, den unschönen Nebeneffekt, daß WP Typography bei der Darstellung auf Android-Tablets (im Samsung Browser “Internet” nur im Hochformat, in Chrome hoch und quer) die Menüpunkte des waagrechten Hauptmenüs trennt und zweizeilig gestückelt untereinander darstellt. Sehr unschön!

    Ich habe versucht das abzustellen, indem ich in den Plugin-Einstellungen die entsprechenden CSS-Klassen (menu) oder IDs (access) als Ausnahmen eingetragen habe und dann zusätzlich auch in der header.php des Themes das Hauptmenu mit <span class="notypo"></span> eingerahmt habe: Hat alles nix geholfen. Und ja, den Cache habe ich bei jeder Änderung immer wieder fleißig geleert.

    Jetzt bin ich mit meinem Latein am Ende. Hast Du einen guten Tipp für mich bzw. was mache ich falsch?

    Vielen Dank und beste Grüße,
    Ralph

    • This topic was modified 5 months, 3 weeks ago by  zonebattler.

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author pepe

    (@pputzer)

    Hallo @zonebattler, ich wollte mir den Effekt auf der Seite anschauen, aber durch die Verwendung von WPtouch ist das ganze etwas erratisch zu testen am Desktop. Ich denke, daß die seltsamen Darstellungen daran liegen, daß manchmal WPtouch über Browser-Sniffing getriggered wird und manchmal die normale “Desktop”-Darstellung zum Zug kommt. Empfehlen würde ich eine responsive Umsetzung im Theme ohne Browser-Sniffing auf PHP-Seite.

    Zum Problem selbst: Das Eintragen von CSS-Klassen oder IDs in irgendwelche Templates kann aus technischen Gründen nicht funktionieren (das steht an sich auch in der Hilfe dazu). Ausgenommen davon sind body-Klassen, für die es eine Speziallösung gibt (nützt im konkreten Anwendungsfall aber nichts). Ansonsten kann diese Ausschlußmöglichkeit leider nur für innerhalb eines Content-Elements (Beitragsinhalt, Titel) verwendetes Markup funktionieren.

    Ich sehe folgende Lösungsmöglichkeiten: Setzen von word-break: normal; hyphens: none; für das Menü, wobei ich nicht weiß, welche Browser-Präfixe notwendig wären oder ob die Ziel-Android-Version diese Eigenschaften überhaupt unterstützt. Damit wird der Wortumbruch unterbunden, obwohl die Breakpoints aus der wp-Typography-Silbentrennung noch enthalten sind. Die andere Variante wäre der Einsatz eines Filters auf den Hook wp_nav_menu_items, etwa in der folgenden Art (Code nicht getestet):

    function my_remove_hyphenation_points( $content ) {
       return str_replace( [ \PHP_Typography\U::SOFT_HYPHEN, \PHP_Typography\U::ZERO_WIDTH_SPACE ], '', $content );
    }
    add_filter( 'wp_nav_menu_items', 'my_remove_hyphenation_points', 99, 1 );

    Hallo pepe,

    vielen Dank für die prompte und ausführliche Antwort! Ich hab’ mal WPtouch temporär deaktiviert, damit Du den Effekt auch nachvollziehen kannst. Hier habe ich zudem einen Screenshot bereitgestellt:

    Screenshot Hauptmenü

    Die Hilfe hatte ich gelesen und auch, daß das Eintragen von Klassen und/oder IDs nicht funktionieren kann. Ich habe mich allerdings gewundert, warum es diese Eingabefelder für Ausnahmen dann überhaupt gibt? Offensichtlich habe ich da irgendwas immer noch nicht kapiert…

    Danke auch für Deine beiden Lösungsansätze, zu deren Implementation es mir allerdings leider am nötigen Hintergrundwissen fehlt. Ich fürchte, daß ich dann halt dann mit dem komischen Effekt leben muß. Auf WP Typography zu verzichten, ist hingegen keine Option: Sowohl die wunderbare Wandelung der Anführungszeichen als auch die Silbentrennung sind unverzichtbare Features für mich.

    Ganz herzlichen Dank für Deinen Unterstützungsversuch und vor allem für die Pflege dieses grandiosen Plugins!

    Beste Grüße,
    Ralph

    Nachtrag: Ich habe Deinen zweiten Vorschlag ausprobiert, indem ich den vorgeschlagenen Code-Schnipsel in die function.php des Themes eingetragen habe. Hat allerdings – leider – keinerlei Wirkung gezeitigt…

    Beste Grüße,
    Ralph

    Plugin Author pepe

    (@pputzer)

    Dieser Style sollten den gewünschten Effekt haben:

    .menu li {
        word-break: normal!important;
        hyphens: none!important;
    }
    Plugin Author pepe

    (@pputzer)

    Sollte das nicht klappen, kontaktiere mich bitte via https://code.mundschenk.at, dann würde ich mir Dein Theme näher anschauen, falls die Lizenzbedingungen das erlauben.

    Wunderbar, das hat auf Anhieb geklappt, danke! Ich mußte noch in Menüpunkten aus mehreren Worten (“Fragen & Antworten” etc.) die Leerstellen durch non-breaking spaces ersetzen, damit die dann auch ungetrennt bleiben, aber jetzt stehen alle Menüpunkte ordentlich in (nur) einer Reihe nebeneinander.

    Kleiner Nebeneffekt ist, daß sich die Einträge mitunter recht nah aneinander drängen, im Einzelfall sogar etwas überlappen, weil der Tablet-Browser die Schrift offenbar etwas größerer rendered als die PC-Browser, siehe

    Screenshot Hauptmenü

    Aber damit kann ich gut leben, das Menü bleibt bedienbar und schaut einzeilig deutlich besser aus als willkürlich auf zwei Zeilen zerhackstückelt…

    Ich habe den CSS-Code jetzt in fünf WordPressen eingebaut, in denen ich das (bis auf die Farben) gleiche Theme verwende, welches auf dem bekannten Standard-Theme Twentyten aufbaut. Funktoniert überall und die mitunter sehr kleinen (und im Einzelfall gar negativen) Abstände zwischen den Menüpunkten fallen nicht so arg ins Gewicht.

    Nochmals herzlichen Dank für die Unterstützung,
    Ralph

Viewing 6 replies - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.