This is a deep dive into hyphenation on the web.
Hyphenation seems to be a dying art. Modern word-processing software like Microsoft Word offers advanced hyphenation options which are largely unknown or ignored. HTML offers several solutions for laying text out. In this tutorial we look at text hyphenated using the ­
HTML entity and compare it to normal text as well as justified text. Re-size (the width of) your browser window to see changes to the hyphenated text in effect.
In this tutorial:
In the time of manual typewriters, a typist was required to judge the space remaining at the end of each line and then manually hyphenate words where necessary. With the advent of word processors with word wrap, this was no longer necessary and users simply stopped making the effort (in terms of language expertise!) required to hyphenate manually.
1. Normal vs hyphenated
Follow along by copying the HTML below into a webpage on your computer.
<p>The mod­ern En­glish language, that de­light­ful­ly id­iosyn­crat­ic con­glom­er­a­tion of pilfered vo­cabulary and capri­cious gram­mar, often leaves even the most erudite sesquipe­dalian flum­moxed. Consider, for in­s­tance, the pneu­mat­ic na­ture of pro­nounc­ing “ough,” a seeming­ly straight­forward grapheme that can morph in­to a ca­cophony of sounds depend­ing on the whims of a by­gone scribe. Or pon­der the plight of the betwixt-and-between letters, like the su­perflu­ous “u” in “honor,” a vesti­gial ap­pendage from a by­gone era that serves no pur­pose oth­er than to trip up the unwary au­to­correct.</p> <p>Yet, amidst this glorious gram­mati­cal gum­bo lies a cer­tain whimsi­cal­i­ty. We can ex­press pro­found philo­sophi­cal ponderings with words like “episte­mology” and “trans­cen­dent,” then des­cend in­­to de­light­ful sil­li­ness with terms like “flabber­gasted” and “rhubarb.” Tru­ly, the En­glish language is a magnifi­cent monstrosi­ty, a sprawling lexi­cal labyrinth that both con­founds and compels us with its effer­ves­cent ec­centrici­ty.</p>
Normal
The modern English language, that delightfully idiosyncratic conglomeration of pilfered vocabulary and capricious grammar, often leaves even the most erudite sesquipedalian flummoxed. Consider, for instance, the pneumatic nature of pronouncing “ough,” a seemingly straightforward grapheme that can morph into a cacophony of sounds depending on the whims of a bygone scribe. Or ponder the plight of the betwixt-and-between letters, like the superfluous “u” in “honor,” a vestigial appendage from a bygone era that serves no purpose other than to trip up the unwary autocorrect.
Yet, amidst this glorious grammatical gumbo lies a certain whimsicality. We can express profound philosophical ponderings with words like “epistemology” and “transcendent,” then descend into delightful silliness with terms like “flabbergasted” and “rhubarb.” Truly, the English language is a magnificent monstrosity, a sprawling lexical labyrinth that both confounds and compels us with its effervescent eccentricity.
Hyphenated
The modern English language, that delightfully idiosyncratic conglomeration of pilfered vocabulary and capricious grammar, often leaves even the most erudite sesquipedalian flummoxed. Consider, for instance, the pneumatic nature of pronouncing “ough,” a seemingly straightforward grapheme that can morph into a cacophony of sounds depending on the whims of a bygone scribe. Or ponder the plight of the betwixt-and-between letters, like the superfluous “u” in “honor,” a vestigial appendage from a bygone era that serves no purpose other than to trip up the unwary autocorrect.
Yet, amidst this glorious grammatical gumbo lies a certain whimsicality. We can express profound philosophical ponderings with words like “epistemology” and “transcendent,” then descend into delightful silliness with terms like “flabbergasted” and “rhubarb.” Truly, the English language is a magnificent monstrosity, a sprawling lexical labyrinth that both confounds and compels us with its effervescent eccentricity.
2. Justified vs hyphenated
Justified
The modern English language, that delightfully idiosyncratic conglomeration of pilfered vocabulary and capricious grammar, often leaves even the most erudite sesquipedalian flummoxed. Consider, for instance, the pneumatic nature of pronouncing “ough,” a seemingly straightforward grapheme that can morph into a cacophony of sounds depending on the whims of a bygone scribe. Or ponder the plight of the betwixt-and-between letters, like the superfluous “u” in “honor,” a vestigial appendage from a bygone era that serves no purpose other than to trip up the unwary autocorrect.
Yet, amidst this glorious grammatical gumbo lies a certain whimsicality. We can express profound philosophical ponderings with words like “epistemology” and “transcendent,” then descend into delightful silliness with terms like “flabbergasted” and “rhubarb.” Truly, the English language is a magnificent monstrosity, a sprawling lexical labyrinth that both confounds and compels us with its effervescent eccentricity.
Hyphenated
The modern English language, that delightfully idiosyncratic conglomeration of pilfered vocabulary and capricious grammar, often leaves even the most erudite sesquipedalian flummoxed. Consider, for instance, the pneumatic nature of pronouncing “ough,” a seemingly straightforward grapheme that can morph into a cacophony of sounds depending on the whims of a bygone scribe. Or ponder the plight of the betwixt-and-between letters, like the superfluous “u” in “honor,” a vestigial appendage from a bygone era that serves no purpose other than to trip up the unwary autocorrect.
Yet, amidst this glorious grammatical gumbo lies a certain whimsicality. We can express profound philosophical ponderings with words like “epistemology” and “transcendent,” then descend into delightful silliness with terms like “flabbergasted” and “rhubarb.” Truly, the English language is a magnificent monstrosity, a sprawling lexical labyrinth that both confounds and compels us with its effervescent eccentricity.
3. Hyphenated vs CSS
Luckily, modern CSS offers us the hyphens
property [4], as in: <p style="hyphens: auto;">
Using ­
The modern English language, that delightfully idiosyncratic conglomeration of pilfered vocabulary and capricious grammar, often leaves even the most erudite sesquipedalian flummoxed. Consider, for instance, the pneumatic nature of pronouncing “ough,” a seemingly straightforward grapheme that can morph into a cacophony of sounds depending on the whims of a bygone scribe. Or ponder the plight of the betwixt-and-between letters, like the superfluous “u” in “honor,” a vestigial appendage from a bygone era that serves no purpose other than to trip up the unwary autocorrect.
Yet, amidst this glorious grammatical gumbo lies a certain whimsicality. We can express profound philosophical ponderings with words like “epistemology” and “transcendent,” then descend into delightful silliness with terms like “flabbergasted” and “rhubarb.” Truly, the English language is a magnificent monstrosity, a sprawling lexical labyrinth that both confounds and compels us with its effervescent eccentricity.
Using CSS
The modern English language, that delightfully idiosyncratic conglomeration of pilfered vocabulary and capricious grammar, often leaves even the most erudite sesquipedalian flummoxed. Consider, for instance, the pneumatic nature of pronouncing “ough,” a seemingly straightforward grapheme that can morph into a cacophony of sounds depending on the whims of a bygone scribe. Or ponder the plight of the betwixt-and-between letters, like the superfluous “u” in “honor,” a vestigial appendage from a bygone era that serves no purpose other than to trip up the unwary autocorrect.
Yet, amidst this glorious grammatical gumbo lies a certain whimsicality. We can express profound philosophical ponderings with words like “epistemology” and “transcendent,” then descend into delightful silliness with terms like “flabbergasted” and “rhubarb.” Truly, the English language is a magnificent monstrosity, a sprawling lexical labyrinth that both confounds and compels us with its effervescent eccentricity.
References:
- Daily Dev Tips [online]. (2020) Using the shy soft hyphen in HTML. Available at: https://daily-dev-tips.com/posts/using-the-shy-soft-hyphen-in-html/
- W3schools. (2022). HTML <wbr> Tag. Retrieved 17 October 2022, from https://www.w3schools.com/tags/tag_wbr.asp
- Hyphenation24. (no date) Easily check hyphenation online. Available at: https://www.hyphenation24.com/ (Accessed: 14 May 2024).
- W3schools. (no date) CSS hyphens Property. Available at: https://www.w3schools.com/cssref/css3_pr_hyphens.php (Accessed: 15 May 2024).