-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathalignment.html
77 lines (58 loc) · 2.06 KB
/
alignment.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'/>
<title>Text Alignment</title>
<link rel='stylesheet' href='typo.css'/>
</head>
<body>
<header>
<nav>
<ul>
<li><a href='web-fonts.html'>Web Fonts</a></li>
<li><a href='history.html'>History</a></li>
<li><a href='indents.html'>Indents</a></li>
<li class='selected'>Alignment</li>
<li><a href='spacing.html'>Spacing</a></li>
<li><a href='line-length.html'>Line Length</a></li>
</ul>
</nav>
<div class='hero'>
<h1>Text Alignment</h1>
</div>
</header>
<div class='page'>
<section class='section section--gray left'>
<h2>Left Alignment</h2>
<p>Left-aligned text is the standard because it gives the reader a vertical
anchor to jump back to on every line. You should use it for most of your body
text (unless you have a very good reason not to).</p>
</section>
<section class='section section--gray center'>
<h2>Center Alignment</h2>
<p>Center-aligned text doesn’t have that anchor, so it’s easier for the eye
to get lost when it tries to jump to the next line. Reserve it for special
kinds of content, like poems, lyrics, and headings.</p>
</section>
<section class='section section--gray'>
<h2>Right Alignment</h2>
<p>Only use right-aligned text when it makes sense for the layout. For
example, a caption for an image:</p>
<figure>
<figcaption>These letters are touching. This is called a
ligature.</figcaption>
<img src='ligature.svg'/>
</figure>
<p>Of course, if you’re publishing content in a language that’s read
right-to-left, that’s another story...</p>
</section>
<section class='section section--gray justify'>
<h2>Justified Alignment</h2>
<p>Justified text requires a good hyphenation engine. Without an intelligent
way to split long words across lines, you get big spaces between words, which
makes it harder to scan the text. Most browsers don’t have good built-in
hyphenation engines.</p>
</section>
</div>
</body>
</html>