mirror of
https://github.com/clagnut/webtypography.git
synced 2025-09-02 09:33:27 +02:00
41 lines
3.2 KiB
HTML
41 lines
3.2 KiB
HTML
|
||
<blockquote class='quote-from-book'> <p><span class='ic'>“</span>In justified text, there is always a trade-off between evenness of word spacing and frequency of hyphenation.</p>
|
||
|
||
<p>Narrow measures – which prevent good justification – are commonly used when the text is set in multiple columns. Setting ragged right under these conditions will lighten the page and decrease its stiffness.</p>
|
||
|
||
<p>Many unserifed faces look best when set ragged no matter what the length of the measure. And mono-spaced fonts, which are common on typewriters, always look better set ragged.”</p>
|
||
</blockquote>
|
||
<p>Setting text justified or ragged is accomplished in <abbr title="Cascading Style Sheets">CSS</abbr> through the <code>text-align</code> property, as follows:</p>
|
||
|
||
<pre><code>p {
|
||
text-align: left; /* ragged right */
|
||
}
|
||
|
||
p {
|
||
text-align: right; /* ragged left */
|
||
}
|
||
|
||
p {
|
||
text-align: justify;
|
||
}</code></pre>
|
||
|
||
<p>Effective justification of text can only be achieved if long words are hyphenated. <abbr title="HyperText Mark-up Language">HTML</abbr> and <abbr title="Cascading Style Sheets">CSS</abbr> 2 do not have any provision for automatic hyphenation and current Web browsers support, even for manual hyphenation, is poor.</p>
|
||
|
||
<p>So don’t justify text on the web.</p>
|
||
|
||
<h2>Future considerations</h2>
|
||
|
||
<p><abbr>CSS3</abbr> provides further refinement of justification within the <a href="http://www.w3.org/TR/css3-text">Text Module</a>. For European languages, the <code>text-justify</code> property provides two justification options: <code>inter-word</code> and <code>inter-character</code>.</p>
|
||
|
||
<p>Setting <code>inter-word</code> selects the simplest and fastest full justification behaviour, which spreads the text evenly across the line by increasing the width of the space between words only. No expansion or compression occurs within the words, i.e. no additional letter spacing is created.</p>
|
||
|
||
<p>Setting <code>inter-character</code> selects the justification behaviour in which both inter-word and inter-letter spacing can be expanded or reduced to spread the text across the whole line. This is the significantly slower and more sophisticated type of the full justify behaviour preferred in newspaper and magazines. Typically, compression is tried first. If unsuccessful, expansion occurs: inter-word spaces are expanded up to a threshold, and finally inter-letter expansion is performed. For example:</p>
|
||
|
||
<pre><code>p {
|
||
text-align: justify;
|
||
text-justify: inter-character;
|
||
}</code></pre>
|
||
|
||
<p><abbr>CSS3</abbr> also provides last line alignment with the <code>text-align-last</code> property. Normally the last line in a paragraph of justified text would not be justified, however if <code>text-align-last</code> is set to <code>justify</code> then the last line will be also spread evenly across the line, although in most cases this would be highly undesirable from a typographical perspective.</p>
|
||
|
||
<p>A potentially more useful purpose for <code>text-align-last</code>, at least for display text, is to set it to <code>size</code>. With <code>size</code> selected, the line content is scaled to fit on the line, so a line with fewer characters will be displayed in a larger font.</p> |