Blocksatz lässt längere Textzeilen auf beiden Seiten bündig erscheinen. In GeneratePress gibt es dafür keinen zwingend notwendigen Spezialschalter – es handelt sich um normales CSS. Im ursprünglichen Arbeitsverlauf funktionierte die erste Lösung grundsätzlich, anschließend zeigte sich aber ein typisches Problem: Einige Blöcke reagierten nicht, und nach einer zu breiten CSS-Erweiterung wurden plötzlich auch Überschriften im Blocksatz dargestellt.
Genau daraus ergibt sich die wichtigste Regel: Blocksatz sollte gezielt auf Fließtext angewendet werden, nicht pauschal auf alle Elemente eines Content-Bereichs.
Die einfache Grundregel für normale Absätze
Wenn du wirklich alle normalen Absätze innerhalb des Beitragsinhalts im Blocksatz darstellen möchtest:
.entry-content p {
text-align: justify;
}Damit werden Paragraphen angesprochen. Überschriften wie H2 oder H3 bleiben außen vor.
Automatische Silbentrennung ergänzen
Deutsche Texte können im Blocksatz schnell große Wortabstände bekommen. Automatische Silbentrennung verbessert das deutlich:
.entry-content p {
text-align: justify;
hyphens: auto;
-webkit-hyphens: auto;
}Der Browser darf dann längere Wörter an passenden Stellen umbrechen.
Warum die Seitensprache wichtig ist
hyphens: auto benötigt die richtige Sprache, um sinnvolle Trennstellen zu bestimmen. WordPress setzt am HTML-Dokument normalerweise ein lang-Attribut anhand der Website-Sprache.
Bei einer deutschsprachigen Website sollte beispielsweise etwas wie lang="de-DE" vorhanden sein. Ist die Website-Sprache falsch eingestellt, kann auch die automatische Silbentrennung schlechter oder gar nicht funktionieren.
Besser als globaler Blocksatz: eigene CSS-Klasse
Blocksatz ist nicht in jedem Bereich einer Website ideal. Deshalb ist eine eigene Klasse oft die bessere Lösung:
.blocksatz {
text-align: justify;
hyphens: auto;
-webkit-hyphens: auto;
}Diese Klasse kannst du gezielt einem Absatz oder einem Container zuweisen.
Klasse im Block-Editor eintragen
Wähle den gewünschten Absatz beziehungsweise Container, öffne rechts Erweitert und trage unter „Zusätzliche CSS-Klasse(n)“ ein:
blocksatzOhne Punkt. Der Punkt wird nur im CSS-Selektor verwendet.
Wenn die Klasse am Container sitzt
Wenn blocksatz auf einem äußeren Container sitzt, möchtest du häufig nur dessen Absätze beeinflussen:
.blocksatz p {
text-align: justify;
hyphens: auto;
-webkit-hyphens: auto;
}Das ist sicherer als:
.blocksatz { text-align: justify; }weil die allgemeine Textausrichtung sonst an Kind-Elemente vererbt werden kann und dadurch möglicherweise Überschriften, Buttons oder andere Texte ebenfalls betroffen sind.
Warum die frühere breite Lösung problematisch war
Im ursprünglichen Verlauf wurde nach dem Hinweis „einige Blöcke reagieren nicht“ der Selektor stark erweitert und unter anderem auf div-Elemente angewendet. Das löste zwar einige Fälle, hatte aber den unerwünschten Nebeneffekt, dass auch Überschriften und andere Inhalte im Blocksatz erschienen.
Das ist genau das Problem mit Regeln wie:
.entry-content div {
text-align: justify;
}Ein div kann nahezu alles enthalten – einschließlich H2, H3, Buttons, Navigation oder Karten. Deshalb sollte man nicht den gesamten Container-Typ pauschal formatieren.
Überschriften bewusst linksbündig lassen
Überschriften im Blocksatz sind typografisch fast nie sinnvoll. Sie bestehen aus wenigen Wörtern und erzeugen dadurch sehr große Lücken.
Wenn du bereits eine vererbte Blocksatz-Regel hast und kurzfristig korrigieren musst:
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
text-align: left;
}Besser ist trotzdem, die ursprüngliche Blocksatz-Regel so präzise zu formulieren, dass Überschriften gar nicht erst betroffen sind.
Listen nicht automatisch in Blocksatz setzen
Listenpunkte sind meist kurz. Blocksatz erzeugt dort häufig unschöne Abstände. Deshalb würde ich li-Elemente nicht pauschal einbeziehen.
Wenn einzelne Listen sehr lange erklärende Absätze enthalten, kann dafür eine eigene Klasse verwendet werden.
Buttons und kurze Texte ausschließen
Button-Beschriftungen, Labels, Eyebrows und kleine Hinweise profitieren nicht von Blocksatz. Eine globale Regel auf Containern kann sie trotzdem erfassen. Darum ist der gezielte Absatz-Selektor die beste Grundlage.
Blocksatz auf Mobilgeräten kritisch prüfen
Auf schmalen Smartphone-Spalten ist Blocksatz oft problematisch. Es passen nur wenige Wörter pro Zeile hinein; dadurch entstehen trotz Silbentrennung sichtbare Lücken.
Eine gute Lösung ist, Blocksatz nur auf größeren Displays zu verwenden:
.blocksatz p {
text-align: justify;
hyphens: auto;
-webkit-hyphens: auto;
}
@media (max-width: 767px) {
.blocksatz p {
text-align: left;
}
}Das verbessert die Lesbarkeit auf Smartphones.
Textbreite entscheidet über die Qualität
Blocksatz funktioniert besser bei einer ausreichend breiten Textspalte. Bei sehr schmalen Karten oder Sidebars ist linksbündiger Text fast immer ruhiger.
Als Faustregel: Je weniger Wörter pro Zeile, desto auffälliger werden die variablen Wortabstände.
Was text-align: justify eigentlich macht
Der Browser vergrößert die Zwischenräume innerhalb einer Zeile so weit, bis Text links und rechts bündig abschließt. Die letzte Zeile eines Absatzes bleibt normalerweise linksbündig.
Du kannst das Verhalten ausdrücklich festlegen:
text-align-last: left;Das ist vor allem hilfreich, wenn andere CSS-Regeln die letzte Zeile beeinflussen.
Robuste Absatzregel
.blocksatz p {
text-align: justify;
text-align-last: left;
hyphens: auto;
-webkit-hyphens: auto;
overflow-wrap: break-word;
}overflow-wrap hilft bei sehr langen Zeichenketten, URLs oder Wörtern, die sonst aus dem Container herausragen könnten.
Nicht mit letter-spacing gegen Lücken kämpfen
Wenn Blocksatz unruhig aussieht, sollte man nicht mit starkem negativem oder positivem letter-spacing dagegenarbeiten. Das verschlechtert die allgemeine Lesbarkeit und kann auch Wörter optisch auseinanderziehen.
Besser sind:
- Silbentrennung
- ausreichende Textbreite
- vernünftige Schriftgröße
- Blocksatz nur auf geeigneten Geräten
Keine komplizierten :not()-Ketten nötig
Nach dem Problem mit den Überschriften könnte man versuchen, alle unerwünschten Elemente mit langen :not()-Selektoren auszuschließen. Das macht das CSS unnötig kompliziert.
Statt „alles formatieren außer H1, H2, H3, Buttons, Listen …“ ist die positive Auswahl viel robuster:
.entry-content p { ... }Also: nur das auswählen, was wirklich Blocksatz bekommen soll.
Warum manche Blöcke nicht auf .entry-content p reagieren
GenerateBlocks oder andere Plugins können Text nicht immer als direkt erwarteten Absatz innerhalb von .entry-content ausgeben. Wenn ein bestimmter Bereich nicht reagiert, solltest du im Browser-Inspektor prüfen, welches HTML dort tatsächlich vorhanden ist.
Vielleicht ist es:
- ein Absatz mit eigener Klasse,
- ein Headline-Block,
- ein Listenpunkt,
- ein Button oder
- ein spezieller Custom Block.
Dann sollte genau dieser Inhalt gezielt angesprochen werden – nicht vorsorglich jedes div der Seite.
GenerateBlocks Global Styles als Alternative
Wenn du dieselbe typografische Variante regelmäßig einsetzen möchtest, kann ein GenerateBlocks Global Style sinnvoller sein als eine frei verteilte CSS-Klasse. Dann ist der Stil zentral verwaltbar.
Für normalen WordPress-Fließtext bleibt eine kleine CSS-Klasse jedoch sehr transparent und leicht nachvollziehbar.
Blocksatz und Barrierefreiheit
Blocksatz ist nicht automatisch barrierefreiheitswidrig, kann aber durch stark wechselnde Wortabstände die Lesbarkeit verschlechtern – insbesondere für Menschen mit bestimmten Seh- oder Leseschwierigkeiten. Deshalb sollte die Gestaltung nicht nur nach „sieht ordentlich aus“ beurteilt werden.
Eine gute Silbentrennung und ausreichend breite Spalten sind entscheidend. Auf mobilen Geräten ist linksbündig oft die bessere Entscheidung.
Eine sinnvolle Lösung für Blogbeiträge
Wenn du normalen Blogtext auf Desktop im Blocksatz darstellen möchtest, aber Überschriften und Mobilgeräte ausschließen willst:
@media (min-width: 768px) {
.entry-content p {
text-align: justify;
text-align-last: left;
hyphens: auto;
-webkit-hyphens: auto;
overflow-wrap: break-word;
}
}Das ist wesentlich übersichtlicher als eine Regel für alle Divs und anschließend zahlreiche Ausnahmen.
Wenn nur einzelne Abschnitte Blocksatz bekommen sollen
Dann empfehle ich:
@media (min-width: 768px) {
.blocksatz p {
text-align: justify;
text-align-last: left;
hyphens: auto;
-webkit-hyphens: auto;
}
}Klasse blocksatz nur an den betreffenden Container setzen.
Fazit
Blocksatz in GeneratePress ist technisch einfach, sollte aber präzise angewendet werden. Die beste Lösung ist nicht, ganze Container oder sämtliche div-Elemente auf text-align: justify zu setzen. Formatiere gezielt Absätze, aktiviere automatische Silbentrennung und lasse Überschriften, Buttons und kurze Texte linksbündig. Auf schmalen Mobilgeräten ist linksbündiger Text meistens besser lesbar als Blocksatz.