/
hyphenation-test.htm
114 lines (103 loc) · 7.62 KB
/
hyphenation-test.htm
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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="c/base.css" type="text/css">
<style type="text/css" id="tests">
.arena p {text-align: justify;}
#p06 {text-align:left;
hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
-webkit-hyphens: auto;}
#p03 {hyphens: auto;}
#p04 {hyphens: manual;}
#p05 {hyphens: none;}
</style>
<title>CSS3 test: hyphens</title></head>
<body id="www-meyerweb-com" class="css test suite">
<h1 id="specref">Hypenation test</h1>
<p><a href="http://www.w3.org/TR/css3-gcpm/#hyphens">http://www.w3.org/TR/css3-gcpm/#hyphens</a></p>
<p>Modified Eric Meyer's hypen page: <a href="http://meyerweb.com/eric/css/tests/css3/hyphens.html">http://meyerweb.com/eric/css/tests/css3/hyphens.html</a></p>
<h3>Styles</h3>
<p>.arena p {text-align: justify;}</p>
<p> #p03 {hyphens: auto;}</p>
<p> #p04 {hyphens: manual;}</p>
<p> #p05 {hyphens: none;}</p>
<p>#p06 {text-align:left;<br>
hyphens: auto;<br>
-moz-hyphens: auto;<br>
-ms-hyphens: auto;<br>
-webkit-hyphens: auto;}</p>
<table border="1">
<caption>
Hyphen results across browsers
</caption>
<tr>
<th>Paragraph characteristics</th>
<th>FF</th>
<th>IE</th>
<th>Chrome</th>
<th>Safari</th>
</tr>
<tr>
<td>p01 - no hints, no css, justified</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
</tr>
<tr>
<td>p02 - hints, no css, justified</td>
<td>x</td>
<td>+</td>
<td>+</td>
<td>+</td>
</tr>
<tr>
<td>p03 - no hints, css - hyphens: auto, justified</td>
<td>+</td>
<td>x</td>
<td>x</td>
<td>x</td>
</tr>
<tr>
<td>p04 - hints, css - hypens: manual, justified</td>
<td>+</td>
<td>+</td>
<td>+</td>
<td>+</td>
</tr>
<tr>
<td><p>p05 - hints, css - hypens: none, justified</p></td>
<td>x</td>
<td>+ <br>
(ignores css)</td>
<td>x</td>
<td>+</td>
</tr>
<tr>
<td>p06 - no hints, hypens:auto (all browser prefixes), left.</td>
<td>+</td>
<td>+</td>
<td>x</td>
<td>+</td>
</tr>
</table>
<p>Hyphenation hints (&shy; or &#00AD;) work with IE, Chrome, Safari and no css hyphens declaration.</p>
<p>Hyphenation hints (&shy; or &#00AD;) work with Firefox, IE, Chrome, Safari and css hyphens:manual declaration.</p>
<p>CSS hyphens: auto (with browser prefixes) work with Firefox, IE, and Safari. </p>
<div class="arena">
<p class="note">It is most likely necessary to resize the viewport to properly evaluate this test.</p>
<p id="p01">[#p01] This is a paragraph with no embedded hyphenation hints and no hyphen-related CSS applied. Corporate gibberish follows. Think visionary. If you generate proactively, you may have to e-enable interactively. We apply the proverb "Grass doesn't grow on a racetrack" not only to our re-purposing but our power to matrix. If all of this comes off as dumbfounding to you, that's because it is! Our feature set is unparalleled in the industry, but our reality-based systems and simple use is usually considered a remarkable achievement. The power to brand robustly leads to the aptitude to embrace seamlessly. What do we streamline? Anything and everything, regardless of reconditeness!</p>
<p id="p02">[#p02] This is a paragraph with embedded hyphenation hints but no hyphen-related CSS applied. Corp­orate gibb­erish fol­lows. Think vision­ary. If you gener­ate pro­actively, you may have to e-enable inter­actively. We apply the pro­verb "Grass doesn't grow on a race­track" not only to our re-pur­posing but our pow­er to mat­rix. If all of this comes off as dumb­founding to you, that's be­cause it is! Our feat­ure set is un­paral­leled in the in­dus­try, but our reality-based sys­tems and sim­ple use is usu­ally con­sid­ered a re­mark­able achieve­ment. The power to brand ro­bustly leads to the apti­tude to em­brace seam­lessly. What do we stream­line? Any­thing and every­thing, re­gard­less of re­con­diteness!</p>
<p id="p03">[#p03] This is a paragraph with no embedded hyphenation hints but hyphen-related CSS applied. Corporate gibberish follows. Think visionary. If you generate proactively, you may have to e-enable interactively. We apply the proverb "Grass doesn't grow on a racetrack" not only to our re-purposing but our power to matrix. If all of this comes off as dumbfounding to you, that's because it is! Our feature set is unparalleled in the industry, but our reality-based systems and simple use is usually considered a remarkable achievement. The power to brand robustly leads to the aptitude to embrace seamlessly. What do we streamline? Anything and everything, regardless of reconditeness!</p>
<p id="p04">[#p04] This is a paragraph with embedded hyphenation hints and hyphen-related CSS applied. Corp­orate gibb­erish fol­lows. Think vision­ary. If you gener­ate pro­actively, you may have to e-enable inter­actively. We apply the pro­verb "Grass doesn't grow on a race­track" not only to our re-pur­posing but our pow­er to mat­rix. If all of this comes off as dumb­founding to you, that's be­cause it is! Our feat­ure set is un­paral­leled in the in­dus­try, but our reality-based sys­tems and sim­ple use is usu­ally con­sid­ered a re­mark­able achieve­ment. The power to brand ro­bustly leads to the apti­tude to em­brace seam­lessly. What do we stream­line? Any­thing and every­thing, re­gard­less of re­con­diteness!</p>
<p id="p05">[#p05] This is a paragraph with embedded hyphenation hints and hyphen-related CSS applied. Corp­orate gibb­erish fol­lows. Think vision­ary. If you gener­ate pro­actively, you may have to e-enable inter­actively. We apply the pro­verb "Grass doesn't grow on a race­track" not only to our re-pur­posing but our pow­er to mat­rix. If all of this comes off as dumb­founding to you, that's be­cause it is! Our feat­ure set is un­paral­leled in the in­dus­try, but our reality-based sys­tems and sim­ple use is usu­ally con­sid­ered a re­mark­able achieve­ment. The power to brand ro­bustly leads to the apti­tude to em­brace seam­lessly. What do we stream­line? Any­thing and every­thing, re­gard­less of re­con­diteness! (NOTE: in this case, the CSS requires hyphenation hints to be ignored.)</p>
<p id="p06">[#p06] This is a paragraph with no embedded hyphenation hints but hyphen-related CSS applied (-ms-hyphens, -moz-hyphens, -webkit-hyphens) and no justification. Corporate gibberish follows. Think visionary. If you generate proactively, you may have to e-enable interactively. We apply the proverb "Grass doesn't grow on a racetrack" not only to our re-purposing but our power to matrix. If all of this comes off as dumbfounding to you, that's because it is! Our feature set is unparalleled in the industry, but our reality-based systems and simple use is usually considered a remarkable achievement. The power to brand robustly leads to the aptitude to embrace seamlessly. What do we streamline? Anything and everything, regardless of reconditeness!</p>
</div>
<p class="credit">Corporate gibberish courtesy the <a href="http://www.andrewdavidson.com/gibberish/?companyname=ConHugeCo">Corporate Gibberish Generator on AndrewDavidson.com</a></p>
</body>
</html>
</body>
</html>