Skip to content

Instantly share code, notes, and snippets.

@e12e

e12e/hyphen-test.html

Last active August 29, 2015 14:26
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save e12e/f04740fd143f18ea69ef to your computer and use it in GitHub Desktop.
Save e12e/f04740fd143f18ea69ef to your computer and use it in GitHub Desktop.
Download ZIP
Some test-cases for css3 hyphens and justification/alignment.
Raw
hyphen-test.html
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
p.lipsum::after {
content: "Justification is a matter of personal preference... Keep in mind that the justification engine of a word processor or web browser is rudimentary compared to that of a professional pagelayout program. So if I’m making a word-processor document or web page, I’ll always left-align the text, because justification can look clunky and coarse.";
}
p {
width: 10em;
padding: 0.5em;
border: dashed black;
margin: 0.3em;
float: left;
text-align: left;
}
p:nth-child(2), p:nth-child(3) {
hyphens: auto;
-moz-hyphens: auto;
}
p:nth-child(3), p:nth-child(4) {
text-align: justify;
}
p::before {
font-weight: bold;
display: block;
border-bottom: solid 1px black;
}
p:first-child::before {
content: "Left algd, no hyphens";
}
p:nth-child(2)::before {
content: "Left algd, hyphenated";
}
p:nth-child(3)::before {
content: "Justified, hyphenated";
}
p:nth-child(4)::before {
content: "Justified, no_hyphens";
}
</style>
</head>
<body>
<p class="lipsum"></p>
<p class="lipsum"></p>
<p class="lipsum"></p>
<p class="lipsum"></p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment