Gibt es einen Grund, die Verwendung zu vermeiden text-align: justify;?
Verringert es die Lesbarkeit oder verursacht es Probleme?
Antworten:
Erstens ist dies ein rein designbezogenes Problem und eine Lösung. Das Design Ihres Rasters gibt an, ob eine Begründung für Text erforderlich ist. Ich denke, die Ausrichtung allein zu rechtfertigen hat keinen wesentlichen Einfluss auf die Benutzerfreundlichkeit. Eine schlechte Typografie, die Text unleserlich macht, verringert die Benutzerfreundlichkeit. Stellen Sie jedoch sicher, dass Sie solide Kontraste und ein gutes Gleichgewicht der Abstände in Ihrem Typ haben. Auch die Schriftgröße spielt eine Rolle.
Diese Seite ist ein erfolgreicher Versuch, Text online zu rechtfertigen. Da Sie mit CSS die Leerzeichen zwischen Buchstaben und Wörtern nicht annähernd so gut steuern können wie mit InDesign, ist es viel schwieriger, Text zu rechtfertigen, und es werden keine Leerzeichenströme in Ihren Zeilen ausgeführt, was bei Leerzeichen zwischen Wörtern der Fall ist überschreitet die Abstände zwischen den Zeilen. Dinge, die die Rechtfertigung von Text erschweren: lange Wörter, Zeilenbreiten, die nicht genügend Wörter enthalten, und zu viel Kontrast zwischen dem Text und den Hintergrundfarben; Sie lassen die Flüsse breiter und deutlicher erscheinen.
Das typografische Ideal besteht darin, einen gleichmäßigen Textblock zu haben. Wenn Sie schielen, wird der Textblock zu einem einheitlichen Vollton. Wenn Sie also den Text auf weißem Hintergrund bei etwa 10 Pixel und 60% Grau halten und Zeilen mit etwa 20 Wörtern haben, sollte das Ausrichten nicht hässlich aussehen. Beachten Sie jedoch, dass dies nichts zur Verbesserung der Benutzerfreundlichkeit beiträgt. Kleiner, relativ leichter Text nervt viele Menschen, insbesondere die älteren Leser.
Ich sollte beachten, dass Sie mit ­(weicher Silbentrennung), wenn Sie lange störende Wörter wie superawesome richtig trennen, den richtigen Satz nachahmen können (z. B. InDesign). Es gibt eine Menge Dinge, die Ihnen dabei helfen können. Ich würde die Logik zum Ausblenden, Bearbeiten und Anzeigen des auf der Clientseite auszuführenden Textes empfehlen, vielleicht damit .
Bearbeiten : Wie andere unten erwähnen, sind CSS-Bindestriche jetzt möglich, außer nicht möglich (nicht in Chrome). Außerdem css4 Angebote noch mehr Kontrolle .
Textausrichtung: Ausrichten sollte derzeit nicht in Browsern verwendet werden. Sie sind nicht gut darin, mit den winzigen Details umzugehen, und die Ausgabe enthält viele Flüsse, für die es keine Unterstützung gibt Silbentrennung (außer weichen Bindestrichen).
Anmerkung oben wurde vor 4,5 Jahren geschrieben. Die Dinge ändern sich langsam ... http://caniuse.com/#feat=css-hyphens
Bearbeiten: Bindestrich wurde in den Kommentaren dieser Antwort auf mich aufmerksam gemacht. Es sieht so aus, als ob es sich lohnt, Textausrichtung zu rechtfertigen. Schauen Sie sich die Websites an, die es verwenden. Möglicherweise möchten Sie Javascript verwenden, um Textausrichtung anzuwenden, bevor Sie dieses Skript verwenden, damit diejenigen ohne Javascript nicht erwischt werden.
Bearbeiten 2:
CSS ermöglicht jetzt die Silbentrennung mit der hyphensEigenschaft [ Browserunterstützung ]. PPK sagt jetzt, dass Sie es zu Ihren Stylesheets hinzufügen sollen , während Eric Meyer sagt , dass Sie es einfach für Handys hinzufügen sollen .
Edit 3: Ein guter kleiner Überblick über die Dinge, die uns jetzt zur Verfügung stehen, mit etwas SASS.
Die Probleme, die andere bei der Rechtfertigung der Ausrichtung angesprochen haben, treten häufiger bei schmalen Spalten auf. Wenn Ihre Spalten im Verhältnis zur Größe Ihrer Schriftarten und anderer Parameter breit genug sind, ist es in Ordnung, den Text zu begründen. Angenommen, Sie möchten durchschnittlich mindestens 12 bis 15 Wörter pro Zeile. Mehr ist besser.
Es gibt keinen technischen Grund, dies nicht zu tun - es ist lediglich eine Designentscheidung. Viele Leute finden, dass gerechtfertigter Text schwerer zu lesen ist, aber ich denke, es hängt von Ihrer Situation ab. Obwohl es für den Druck gut funktioniert, geben Webbrowser im Allgemeinen nicht genügend Kontrolle über die eventuelle Ausgabe von Text, um sicherzustellen, dass das, was Sie bereitstellen, auf den Bildschirmen einiger Leute nicht wie Mist aussieht.
Ihre beste Option ist es, eine Rechtfertigung zu vermeiden.
Ich kann mir keinen zwingenden Grund vorstellen, warum man Text nicht rechtfertigen sollte - ab einem bestimmten Punkt verlangen Umfang und Breite des Inhalts fast, dass er gerechtfertigt ist. Natürlich werden Sie Probleme mit Inhalten bekommen, die aus bestimmten Wortkombinationen bestehen, aber meiner Meinung nach haben Sie ein anderes Problem, wenn Sie Flüsse und ungewöhnlich große Zwischenräume zwischen Wörtern sehen - eines der Lesbarkeit und Klarheit.
Was ich um jeden Preis vermeiden würde, ist zentrierter Körpertext. Ich glaube nicht, dass es eine größere rote Fahne für ammateurhaftes Webdesign gibt.
Ich bevorzuge die linke Ausrichtung (Textausrichtung: links), da sie im Allgemeinen besser lesbar ist. Es ist auch schneller, gleichmäßig verteilte Wörter zu lesen, so höre ich. Wenn Sie keinen stilistischen Grund für die Verwendung von "Rechtfertigung" haben, lassen Sie ihn links, rechts oder mittig. Verwenden Sie speziell für Textkörper links. (Eigentlich möchten Sie so etwas wie "vorwärts" für Text in die andere Richtung (z. B. Hebräisch) ...)
Wie bei jeder Webdesign-Frage kommt es darauf an. Wie bereits erwähnt, sieht begründeter Text in engen Spalten normalerweise nicht gut aus. Ich würde in der Regel in Seitenleisten dagegen empfehlen, da die Seitenleisten normalerweise schmal sind.
Mit einer Textkopie mit den oft empfohlenen 10 Wörtern pro Zeile (oder mit einem darüber liegenden Betrag) werden Sie wahrscheinlich in der Lage sein, mit gerechtfertigtem Text davonzukommen und ihn die meiste Zeit einigermaßen gut aussehen zu lassen, es sei denn, Sie verwenden viel wirklich langen Wörter und / oder Zeichenfolgen.
Ich glaube, ich habe diese Seite schon einmal auf StackOverflow gepimpt, aber Jon Tan verwendet in seiner Textkopie (innerhalb von Artikeln) gerechtfertigten Text und er sieht in 99,99% der Fälle großartig aus.
Die Begründung sollte nicht ohne Silbentrennung verwendet werden. Hier ist eine PHP-basierte Silbentrennungsbibliothek und ein Port dieser Bibliothek zu einem WordPress-Plugin: wp-Typography .
Ich denke, dass es beim Drucken vollkommen in Ordnung ist, aber bei den meisten Webbrowsern ist es klobig, da Abstand und Silbentrennung nicht genau kontrolliert werden können. Typografen können in einigen Fällen sogar geringfügig mit dem Buchstabenabstand oder der Kontraktion von Schriftarten spielen, da Seiten / Spalten (zumindest in Zeitschriften) fein abgestimmt werden können.
Erhh ... Nein ...!
[ernsthaft] WordPress verwendet Rechtfertigung, und ich denke, das ist eine ziemlich starke Aussage darüber, ob es die Lesbarkeit beeinträchtigt oder nicht ...
Sie können auch Text-Rechtfertigung verwenden: Zeitung. Mit dem CSS-Tag für die Textausrichtung können Sie steuern, wie Sie den Text beim Ausrichten umbrechen
text-justifyexistiert in der neuesten Version des CSS3-Textmodulentwurfs, aber der Wert von existiert newspapernicht (und hat es wahrscheinlich nie gegeben). Dies sind auch CSS- Eigenschaften , keine Tags
text-justify: newspaperbefand sich 2003 in einer CR für CSS3-Text , daher ist es nicht ganz richtig zu sagen, dass es nie * existiert hat - unabhängig davon, ob es zu einem bestimmten Zeitpunkt proprietär war. :)
Es sollte erwähnt werden, dass Internet Explorer (zumindest) bis Version 8 nicht text-align: justifykorrekt gerendert wird. Stattdessen wird es interpretiert alstext-align: center .
Hier gibt es mehr Infos: Textausrichtung: Ausrichten
Ich hatte Kopfschmerzen, um herauszufinden, warum der IE immer wieder Dinge zentrierte. Vielleicht spart es jemand anderem etwas Zeit.
Die Textausrichtung kann auf verschiedene Arten erfolgen.
Einige Definitionen: Das Anpassen des Abstands zwischen Wörtern ist "Tracking". Das Anpassen des Abstands zwischen Zeichen ist "Kerning". Gute Layoutprogramme führen einige Kerning-Vorgänge automatisch durch und variieren je nach Buchstabenpaar. Das va der Variablen kann genauer als das xa kerned werden. Gute Schriftarten haben Tabellen mit Kerning-Hinweisen eingebaut, um diesen Prozess zu unterstützen.
In den frühen Tagen der Monospace-Schrift wurde dies durch Einfügen zusätzlicher Leerzeichen zwischen den Wörtern erreicht. Dies führte zu einer sehr klobig aussehenden Ausgabe. Wenn Sie 4 Leerzeichen am Ende der Zeile und 6 Leerzeichen in der Zeile hätten, würden 4 davon zu doppelten Leerzeichen.
Monospace-Schriftarten sollten nicht gerechtfertigt sein.
Bei Schriftarten mit variabler Breite haben wir Leerzeichen, Leerzeichen usw., sodass der Leerzeichen besser verteilt werden kann.
Ich denke, hier befinden sich jetzt die meisten Browser. Es funktioniert die meiste Zeit ziemlich gut. Damit es gut funktioniert, müssen die folgenden Bedingungen erfüllt sein:
Das durchschnittliche englische Wort besteht aus 5 Zeichen. Im Durchschnitt haben Sie also 5 Zeichen (das Wort mit 5 Zeichen plus Leerzeichen würde nicht passen und wird in die nächste Zeile verschoben).
Wenn Sie 10 Wörter in der Zeile haben, müssen Sie jeder Zwischenwortlücke etwa einen halben Standardplatz hinzufügen.
Wenn das letzte Wort lang ist, wie "Kopfschmerzen", und es keinen Platz dafür gibt, haben Sie jetzt 10 Felder zum Verteilen. Das fängt an schlecht auszusehen.
Hier kommt ein Silbentrennungswörterbuch ins Spiel. Die Silbentrennung kann per Algorithmus erfolgen, es gibt jedoch genügend Ausnahmen, bei denen ein Wörterbuch sehr hilfreich ist. (Es gibt ein Sonderzeichen für weiche Bindestriche für Wörter, die nicht in Ihrem Wörterbuch enthalten sind.)
Durch die Silbentrennung kann ein Wort geteilt werden, sodass die Zeile gleichmäßiger gefüllt wird.
Empirisch entschied ich, dass eine Linienlänge von 65 em einen guten Kompromiss darstellt. Dies ergibt die meiste Zeit 11-13 Wörter pro Zeile.
Ein anderer Ansatz zur Rechtfertigung besteht darin, den Raum zwischen den Zeichen aufzuteilen. Dies vermeidet einige der oben genannten Probleme, sieht aber dennoch seltsam aus, wenn Sie viel Platz in nicht genügend Zeilen verteilen. Sie sehen dies ab und zu in Zeitungen, in denen ein Wort zwischen den einzelnen Zeichen einen vollen Abstand zu haben scheint. Dies ist ein gutes Argument für eine längere Linie.
Gute Satzprogramme (InDesign, * TeX, Framemaker) bieten eine Kombination aus zusätzlichem Leerzeichen in Zwischenwortlücken und winzigen zusätzlichen Leerzeichen zwischen Zeichen.
Es gibt ein neues Kind im Block, Text-Alignment, das in CSS verwendet werden kann, um die Verwendung von Text-Align zu ändern: Justieren. Nominell akzeptiert es die Optionen
CanIuse https://caniuse.com/#search=text-justify CSS-Arbeitsgruppe https://drafts.csswg.org/css-text-3/#text-justify-property
CanIuse meldet derzeit nur die Konformität für Firefox. Chrome unterstützt dies, erfordert jedoch die Aktivierung experimenteller Funktionen. CanIuse behauptet, dass der Support fehlerhaft ist. Wenn Sie zur Chromium-Bug-Tracking-Site gehen, wird behauptet, dass dies behoben ist. Stelle dir das vor. Nicht getestet.
Andere pragmatische Punkte:
Ich habe vier Änderungen am Stylesheet meiner Website vorgenommen:
Das Ergebnis war, dass sich die Zeit vor Ort und die Seiten pro Sitzung verdoppelten.
Anekdotisch, kann aber Ihren eigenen Test wert sein.