info/webtypography
1
0
Fork 0
mirror of https://github.com/clagnut/webtypography.git synced 2025-09-08 20:20:43 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #11 from nevanscott/cssexamples

Browse Source 
cleaning up CSS example code
This commit is contained in:
Richard Rutter
2014-04-24 21:17:34 +01:00
parent 038a3e31b7 a7493d037b
commit c564aefc7f
20 changed files with 166 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
items/2.1.3.html
View File

@@ -7,14 +7,17 @@
</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&nbsp;follows:</p>
<pre><code>P {
text-align:left /* ragged right */ }
<pre><code>p {
text-align: left; /* ragged right */
}
P {
text-align:right /* ragged left */ }
p {
text-align: right; /* ragged left */
}
P {
text-align:justify }</code></pre>
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&nbsp;do not have any provision for automatic hyphenation and current Web browsers support, even for manual hyphenation, is&nbsp;poor.</p>
@@ -28,9 +31,10 @@ P {
<p>Setting <code>inter-character</code> selects the justification behavior 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&nbsp;example:</p>
<pre><code>P {
text-align:justify;
text-justify:inter-character }</code></pre>
<pre><code>p {
text-align: justify;
text-justify: inter-character;
}</code></pre>
<p><abbr>CSS3</abbr>&nbsp;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&nbsp;perspective.</p>