Wer kennt es nicht, wenn eine Webseite mobil seitlich scrollbar ist und dadurch wenig professionell wirkt. Ohne korrekte Silbentrennung können lange Wörter auf kleinen Bildschirmen zu Layout-Problemen führen, die das Benutzererlebnis beeinträchtigen.
Benutzer neigen dazu, Websites zu verlassen, die schwer zu navigieren oder zu lesen sind. Daher ist es wichtig, dass jede Seite, einschließlich der WordPress-basierten, ein Layout hat, das sich nahtlos an unterschiedliche Bildschirmgrößen anpasst.
HTML Silbentrennung
Durch die Implementierung von Silbentrennung mithilfe von HTML können Webentwickler die Art und Weise steuern, wie einzelne Wörter auf Webseiten umgebrochen werden.
Einsatz des Soft Hyphen ()
Der ­ HTML-Code ist ein spezielles Zeichen für einen optionalen Trennstrich, der sogenannte Soft Hyphen. Er wird innerhalb eines Wortes platziert und zeigt dem Browser an, wo ein Wort bei Bedarf getrennt werden kann.
Beispiel für HTML-Silbentrennung
Dies ist ein besonders langes Wort: Sehr­lange­wortkomposition
Im obigen Beispiel würde der Browser nur an den mit ­ gekennzeichneten Stellen trennen, wenn das Wort ansonsten nicht in die Zeile passen würde.
White Space Kontrolle in HTML
Es gibt Situationen, in denen bestimmte Wörter zusammengehalten werden müssen. HTML ermöglicht es uns, mit dem (non-breaking space) Leerzeichen sicherzustellen, dass Wörter verbunden bleiben.
Die Phrase „besser spät als nie“ wird nicht getrennt.
Im Beispiel bleibt der Ausdruck „spät als nie“ dank immer zusammen, was für bestimmte Textarten wie Zitate oder feste Begriffe unerlässlich ist.
CSS Silbentrennung
CSS verleiht Entwicklern noch mehr Kontrolle über die Silbentrennung und den Zeilenumbruch von Text auf Webseiten.
Anwendung der CSS-Eigenschaft word-break
-ms-word-break: break-all;
word-break: break-all; /* Non standard for WebKit */
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;Diese Anweisung sorgt dafür, dass Wörter am Zeilenende ordnungsgemäß getrennt werden, ohne das Layout zu stören.
Die CSS-Eigenschaft word-break ist ein mächtiges Werkzeug zur Kontrolle des Umbruchs von Wörtern an den Zeilenenden. Sie beeinflusst, wie Wörter in einem Textblock getrennt werden, wenn sie an das Ende einer Zeile gelangen. Es gibt mehrere Werte, die mit dieser Eigenschaft verwendet werden können, und es ist wichtig zu verstehen, wie und wann man sie einsetzt, sowie ihre Grenzen zu erkennen.
Verständnis der word-break Eigenschaft
word-break steuert den Zeilenumbruch innerhalb von Wörtern und kann mehrere Werte haben:
normal: Verwendet den Browserstandard für Zeilenumbrüche.
- break-all: Erlaubt es, Wörter an jeder Stelle zu brechen, um Überläufe zu verhindern.
- keep-all: Verhindert den Umbruch von Wörtern. Es ist nützlich in Sprachen wie Chinesisch, Japanisch oder Koreanisch, wo der Zeilenumbruch zwischen den Zeichen stattfinden kann, ohne den Lesefluss zu beeinträchtigen.
Verwendung von hyphens: auto in CSS
Die Eigenschaft hyphens: auto ermöglicht es dem Browser, Silbentrennung automatisch anzuwenden, was die Benutzererfahrung erheblich verbessern kann.
Anpassen von CSS für automatische Silbentrennung
Um die Lesbarkeit von Text auf Ihrer Website zu verbessern, fügen Sie Ihrem CSS code die hyphens: auto Eigenschaft hinzu:
body { hyphens: auto; }Die CSS-Klasse eines Elements finden
Um die CSS-Klasse eines Titels oder eines anderen Elements zu finden, können Sie den Inspektor Ihres Browsers verwenden. Rechtsklicken Sie auf den Titel und wählen Sie Untersuchen. Im Inspektor sehen Sie den HTML-Code und die zugehörigen CSS-Klassen. Für einen Titel sieht das oft zum Beispiel so aus:
<h1 class="titel-klasse">Mein Titel</h1>Dann können Sie Ihren CSS-Code so anpassen:
.titel-klasse { hyphens: auto; }Fügen Sie diesen Code entweder im Customizer unter Zusätzliches CSS oder im Fullsite-Editor, wie oben beschrieben, hinzu.
Wichtige Hinweise zur CSS-Eigenschaftsanpassung
Es ist wichtig zu beachten, dass das lang Attribut in Ihrem HTML-Tag korrekt gesetzt ist, damit die automatische Silbentrennung wirksam wird.
CSS über den Customizer hinzufügen
Gehen Sie in Ihrem WordPress-Dashboard zu Design > Customizer. Dort finden Sie den Bereich Zusätzliches CSS. Hier können Sie Ihren CSS-Code direkt eingeben. Dieser Bereich ist ideal für kleine Änderungen wie die Silbentrennung.
CSS im Fullsite-Editing hinzufügen
Im Fullsite-Editing, das mit WordPress Block-Themes verwendet wird, können Sie globale Stile über den Site-Editor anpassen. Öffnen Sie den Site-Editor und klicken Sie auf den Global Styles-Tab. Wählen Sie By Block Type und dann den Blocktyp aus, den Sie anpassen möchten. Hier können Sie benutzerdefiniertes CSS für spezifische Blocktypen hinzufügen.
Browser-Kompatibilität und Unterstützung für CSS-Silbentrennung
Die Unterstützung für CSS-Silbentrennung variiert je nach Browser, jedoch unterstützen alle modernen Browser wie Firefox, Chrome, Safari und Edge diese Funktion.
Abschluss und weiterführende Gedanken
Die Implementierung von Silbentrennung ist ein kritischer Aspekt der Website-Gestaltung, der die Lesbarkeit und das Gesamtbild Ihrer Inhalte beeinflusst. Es lohnt sich, die Zeit zu investieren, um HTML und CSS entsprechend anzupassen, die Webseite mobil zu testen und die Kompatibilität zu gewährleisten.
Die Wahl zwischen automatischer und manueller Silbentrennung
Während automatische Silbentrennung Bequemlichkeit bietet, kann manuelle Silbentrennung in einigen Fällen präziser sein, insbesondere bei fachspezifischen Begriffen oder bei Sprachen mit komplexen Trennregeln.
Vorteile der manuellen Silbentrennung
Manuelle Silbentrennung gibt den Entwicklern vollständige Kontrolle und vermeidet Fehltrennungen, die durch die automatische Erkennung entstehen könnten.
Zusammenfassung
Webentwickler und Content-Manager sollten die Silbentrennung in ihre Webdesign- und Content-Strategie integrieren. Mit den dargestellten Informationen und Techniken können Sie sicherstellen, dass Ihre Website-Texte auf allen Geräten richtig dargestellt werden.
Ich hoffe, dieser ausführlichere Artikel entspricht Ihren Vorgaben für Wortanzahl, Überschriften, Absätzen und Bildern. Wenn Sie spezifische Bilder im Sinn haben, die Sie in den Artikel integrieren möchten, oder weitere Anpassungen benötigen, lassen Sie es mich wissen.
