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 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&shy;ern En&shy;glish lan­guage, that
    de&shy;light&shy;ful&shy;ly id&shy;io­syn&shy;crat&shy;ic con­&shy;glom­&shy;er&shy;a&shy;tion of pil­fered vo&shy;cab­u­lary and capri­&shy;cious gram&shy;mar, of­ten leaves even the most eru­dite se­squi­pe&shy;da­lian flum­&shy;moxed. Con­sid­er, for in&shy;­s&shy;tance, the pneu­&shy;mat&shy;ic na­&shy;ture of pro­&shy;nounc&shy;ing “ough,” a seem­ing­&shy;ly straight&shy;for­ward gra­pheme that can morph in&shy;to a ca&shy;co­pho­ny of sounds de­pen­d&shy;ing on the whims of a by&shy;gone scribe. Or pon&shy;der the plight of the be­twixt-and-be­tween let­ters, like the su&shy;per­flu&shy;ous “u” in “honor,” a ves­ti­&shy;gial ap&shy;pen­dage from a by&shy;gone era that serves no pur­&shy;pose oth&shy;­er than to trip up the un­wary au&shy;to&shy;cor­rect.</p>

<p>Yet, amidst this glo­ri­ous gram­&shy;mat­i&shy;cal gum&shy;bo lies a cer­&shy;tain whim­si­&shy;ca­l&shy;i&shy;ty. We can ex­&shy;press pro­&shy;found philo&shy;soph­i­&shy;cal pon­der­ings with words like “epis­te&shy;mol­og­y” and “tran­s&shy;cen&shy;dent,” then de­s&shy;cend in&shy;­&shy;to de&shy;light&shy;ful sil&shy;li­&shy;ness with terms like “flab­ber­&shy;gast­ed” and “rhubarb.” Tru­&shy;ly, the En&shy;glish lan­guage is a mag­nif­i­&shy;cent mon­stros­i&shy;ty, a sprawl­ing lex­i­&shy;cal labyrinth that both con&shy;founds and com­pels us with its ef­fer&shy;­ves&shy;cent ec­&shy;cen­tric­i­&shy;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 mod­ern En­glish lan­guage, that de­light­ful­ly id­io­syn­crat­ic con­­glom­­er­a­tion of pil­fered vo­cab­u­lary and capri­­cious gram­mar, of­ten leaves even the most eru­dite se­squi­pe­da­lian flum­­moxed. Con­sid­er, for in­­s­tance, the pneu­­mat­ic na­­ture of pro­­nounc­ing “ough,” a seem­ing­­ly straight­for­ward gra­pheme that can morph in­to a ca­co­pho­ny of sounds de­pen­d­ing on the whims of a by­gone scribe. Or pon­der the plight of the be­twixt-and-be­tween let­ters, like the su­per­flu­ous “u” in “honor,” a ves­ti­­gial ap­pen­dage from a by­gone era that serves no pur­­pose oth­­er than to trip up the un­wary au­to­cor­rect.

Yet, amidst this glo­ri­ous gram­­mat­i­cal gum­bo lies a cer­­tain whim­si­­ca­l­i­ty. We can ex­­press pro­­found philo­soph­i­­cal pon­der­ings with words like “epis­te­mol­og­y” and “tran­s­cen­dent,” then de­s­cend in­­­to de­light­ful sil­li­­ness with terms like “flab­ber­­gast­ed” and “rhubarb.” Tru­­ly, the En­glish lan­guage is a mag­nif­i­­cent mon­stros­i­ty, a sprawl­ing lex­i­­cal labyrinth that both con­founds and com­pels us with its ef­fer­­ves­cent ec­­cen­tric­i­­ty.

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 lan­guage, that de­light­ful­ly idio­syn­cratic con­­glom­­er­a­tion of pil­fered vo­cab­u­lary and capri­cious gram­mar, of­ten leaves even the most eru­dite se­squi­pe­da­lian flum­moxed. Con­sid­er, for in­stance, the pneu­matic na­ture of pro­nouncing “ough,” a seem­ing­ly straight­for­ward gra­pheme that can morph into a ca­co­pho­ny of sounds de­pen­ding on the whims of a by­gone scribe. Or pon­der the plight of the be­twixt-and-be­tween let­ters, like the su­per­flu­ous “u” in “hon­or,” a ves­ti­gial ap­pendage from a by­gone era that serves no pur­pose oth­er than to trip up the un­wary au­to­cor­rect.

Yet, amidst this glo­ri­ous gram­mat­i­cal gumbo lies a cer­tain whim­si­ca­lity. We can ex­press pro­found philo­soph­i­cal pon­der­ings with words like “epis­te­mol­og­y” and “tran­scen­dent,” then de­scend in­to delight­ful silli­ness with terms like “flab­ber­gast­ed” and “rhubarb.” Tru­ly, the English lan­guage is a mag­nif­i­cent mon­stros­i­ty, a sprawl­ing lex­i­cal labyrinth that both con­founds and com­pels us with its ef­fer­ves­cent ec­cen­tric­i­ty.

3. Hyphenated vs CSS

Luckily, modern CSS offers us the hyphens property [4], as in: <p style="hyphens: auto;">

Using &shy;

The modern English lan­guage, that de­light­ful­ly idio­syn­cratic con­­glom­­er­a­tion of pil­fered vo­cab­u­lary and capri­cious gram­mar, of­ten leaves even the most eru­dite se­squi­pe­da­lian flum­moxed. Con­sid­er, for in­stance, the pneu­matic na­ture of pro­nouncing “ough,” a seem­ing­ly straight­for­ward gra­pheme that can morph into a ca­co­pho­ny of sounds de­pen­ding on the whims of a by­gone scribe. Or pon­der the plight of the be­twixt-and-be­tween let­ters, like the super­fluous “u” in “ho­nor,” a ves­ti­gial ap­pendage from a by­gone era that serves no pur­pose oth­er than to trip up the un­wary au­to­cor­rect.

Yet, amidst this glo­ri­ous gram­mat­i­cal gumbo lies a cer­tain whim­si­ca­lity. We can ex­press pro­found philo­soph­i­cal pon­der­ings with words like “epis­te­mol­og­y” and “tran­scen­dent,” then de­scend in­to delight­ful silli­ness with terms like “flab­ber­gast­ed” and “rhubarb.” Tru­ly, the English lan­guage is a mag­nif­i­cent mon­stros­i­ty, a sprawl­ing lex­i­cal labyrinth that both con­founds and com­pels us with its ef­fer­ves­cent ec­cen­tric­i­ty.

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:

  1. 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/
  2. W3schools. (2022). HTML <wbr> Tag. Retrieved 17 October 2022, from https://www.w3schools.com/tags/tag_wbr.asp
  3. Hyphenation24. (no date) Easily check hyphenation online. Available at: https://www.hyphenation24.com/ (Accessed: 14 May 2024).
  4. W3schools. (no date) CSS hyphens Property. Available at: https://www.w3schools.com/cssref/css3_pr_hyphens.php (Accessed: 15 May 2024).

By MisterFoxOnline

Mister Fox AKA @MisterFoxOnline is an ICT, IT and CAT Teacher who has just finished training as a Young Engineers instructor. He has a passion for technology and loves to find solutions to problems using the skills he has learned in the course of his IT career.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.