Hyphenation for HTML Mathias Nater [email protected] http://mnn.ch/ The T X hyphenation applied to HTML Motivation E layout w/o hyphenation About Frank M. Liangs hyphenation algorithm and its layout with hyphenation The TEX port to Javascript hyphenation algorithm The original TEX hyphenation algorithm (1977) The current TEX Mathias Nater hyphenation algorithm (1983) [email protected] Creating the patterns (patgen) Using the patterns http://mnn.ch/ (hyphenation) HTML and the soft hyphen The Port to BachoT X 2010 Javascript E Server side or Client side? How it works Differences and Improvements Back to the Future Hyphenation for Organisation HTML Mathias Nater [email protected] Motivation http://mnn.ch/ Text layout without hyphenation Motivation Text layout with hyphenation layout w/o hyphenation layout with hyphenation The TEX The TEX hyphenation algorithm hyphenation The original T X hyphenation algorithm (1977) algorithm E The original TEX hyphenation algorithm The current TEX hyphenation algorithm (1983) (1977) The current TEX Creating the patterns (patgen) hyphenation algorithm (1983) Using the patterns (hyphenation) Creating the patterns (patgen) Using the patterns HTML and the soft hyphen (hyphenation) HTML and the The Port to Javascript soft hyphen The Port to Server side or Client side? Javascript Server side or Client side? How it works How it works Differences and Differences and Improvements Improvements Back to the Future Back to the Future Hyphenation for Organisation HTML Mathias Nater [email protected] Motivation http://mnn.ch/ Text layout without hyphenation Motivation Text layout with hyphenation layout w/o hyphenation layout with hyphenation The TEX The TEX hyphenation algorithm hyphenation The original T X hyphenation algorithm (1977) algorithm E The original TEX hyphenation algorithm The current TEX hyphenation algorithm (1983) (1977) The current TEX Creating the patterns (patgen) hyphenation algorithm (1983) Using the patterns (hyphenation) Creating the patterns (patgen) Using the patterns HTML and the soft hyphen (hyphenation) HTML and the The Port to Javascript soft hyphen The Port to Server side or Client side? Javascript Server side or Client side? How it works How it works Differences and Differences and Improvements Improvements Back to the Future Back to the Future Hyphenation for Organisation HTML Mathias Nater [email protected] Motivation http://mnn.ch/ Text layout without hyphenation Motivation Text layout with hyphenation layout w/o hyphenation layout with hyphenation The TEX The TEX hyphenation algorithm hyphenation The original T X hyphenation algorithm (1977) algorithm E The original TEX hyphenation algorithm The current TEX hyphenation algorithm (1983) (1977) The current TEX Creating the patterns (patgen) hyphenation algorithm (1983) Using the patterns (hyphenation) Creating the patterns (patgen) Using the patterns HTML and the soft hyphen (hyphenation) HTML and the The Port to Javascript soft hyphen The Port to Server side or Client side? Javascript Server side or Client side? How it works How it works Differences and Differences and Improvements Improvements Back to the Future Back to the Future Hyphenation for Organisation HTML Mathias Nater [email protected] Motivation http://mnn.ch/ Text layout without hyphenation Motivation Text layout with hyphenation layout w/o hyphenation layout with hyphenation The TEX The TEX hyphenation algorithm hyphenation The original T X hyphenation algorithm (1977) algorithm E The original TEX hyphenation algorithm The current TEX hyphenation algorithm (1983) (1977) The current TEX Creating the patterns (patgen) hyphenation algorithm (1983) Using the patterns (hyphenation) Creating the patterns (patgen) Using the patterns HTML and the soft hyphen (hyphenation) HTML and the The Port to Javascript soft hyphen The Port to Server side or Client side? Javascript Server side or Client side? How it works How it works Differences and Differences and Improvements Improvements Back to the Future Back to the Future Hyphenation for Organisation HTML Mathias Nater [email protected] http://mnn.ch/ need Motivation layout w/o hyphenation layout with hyphenation The TEX hyphenation word patgen algorithm list The original TEX hyphenation algorithm (1977) The current TEX hyphenation algorithm (1983) hyphenation hyphenation Creating the patterns soft hyphen (patgen) patterns algorithm Using the patterns (hyphenation) HTML and the soft hyphen The Port to hyphenator Javascript Server side or Client side? How it works Differences and Improvements Back to the Future Hyphenation for Text layout without hyphenation HTML Mathias Nater [email protected] http://mnn.ch/ Motivation layout w/o hyphenation Current Browsers layout with hyphenation I MS IE 6/7/8 (∼ 44%) The TEX hyphenation algorithm I Firefox 3.5 (∼ 42%) The original TEX hyphenation algorithm I Safari 4 (∼ 4%) (1977) The current TEX hyphenation algorithm I Opera 10 (∼ 3%) (1983) Creating the patterns (patgen) do not hyphenate text automatically! Using the patterns (hyphenation) I align left: overfull boxes and unbalanced line endings HTML and the soft hyphen I justified: big word spaces and rivers The Port to Javascript Server side or Client side? How it works Differences and Improvements Back to the Future Hyphenation for Text layout without hyphenation HTML Mathias Nater [email protected] http://mnn.ch/ Motivation layout w/o hyphenation Current Browsers layout with hyphenation I MS IE 6/7/8 (∼ 44%) The TEX hyphenation algorithm I Firefox 3.5 (∼ 42%) The original TEX hyphenation algorithm I Safari 4 (∼ 4%) (1977) The current TEX hyphenation algorithm I Opera 10 (∼ 3%) (1983) Creating the patterns (patgen) do not hyphenate text automatically! Using the patterns (hyphenation) I align left: overfull boxes and unbalanced line endings HTML and the soft hyphen I justified: big word spaces and rivers The Port to Javascript Server side or Client side? How it works Differences and Improvements Back to the Future Hyphenation for Text layout without hyphenation HTML Mathias Nater [email protected] http://mnn.ch/ Motivation Current Browsers layout w/o hyphenation layout with hyphenation I MS IE 6/7/8 (∼ 44%) The TEX hyphenation I Firefox 3.5 (∼ 42%) algorithm The original TEX hyphenation algorithm I Safari 4 (∼ 4%) (1977) The current TEX hyphenation algorithm I Opera 10 (∼ 3%) (1983) Creating the patterns do not hyphenate text automatically! (patgen) Using the patterns This leads to poor typography: (hyphenation) HTML and the I align left: overfull boxes and unbalanced line endings soft hyphen The Port to I justified: big word spaces and rivers Javascript Server side or Client side? How it works Differences and Improvements Back to the Future Hyphenation for Text layout without hyphenation HTML Mathias Nater [email protected] http://mnn.ch/ Motivation Current Browsers layout w/o hyphenation layout with hyphenation I MS IE 6/7/8 (∼ 44%) The TEX hyphenation I Firefox 3.5 (∼ 42%) algorithm The original TEX hyphenation algorithm I Safari 4 (∼ 4%) (1977) The current TEX hyphenation algorithm I Opera 10 (∼ 3%) (1983) Creating the patterns do not hyphenate text automatically! (patgen) Using the patterns This leads to poor typography: (hyphenation) HTML and the I align left: overfull boxes and unbalanced line endings soft hyphen The Port to I justified: big word spaces and rivers Javascript Server side or Client side? How it works Differences and Improvements Back to the Future Hyphenation for Text layout without hyphenation HTML Mathias Nater [email protected] http://mnn.ch/ Motivation Current Browsers layout w/o hyphenation layout with hyphenation I MS IE 6/7/8 (∼ 44%) The TEX hyphenation I Firefox 3.5 (∼ 42%) algorithm The original TEX hyphenation algorithm I Safari 4 (∼ 4%) (1977) The current TEX hyphenation algorithm I Opera 10 (∼ 3%) (1983) Creating the patterns do not hyphenate text automatically! (patgen) Using the patterns This leads to poor typography: (hyphenation) HTML and the I align left: overfull boxes and unbalanced line endings soft hyphen The Port to I justified: big word spaces and rivers Javascript Server side or Client side? How it works Differences and Improvements Back to the Future Hyphenation for Text layout without hyphenation HTML text-align: left; Mathias Nater [email protected] http://mnn.ch/ Motivation layout w/o hyphenation layout with hyphenation The TEX hyphenation algorithm The original TEX hyphenation algorithm (1977) The current TEX hyphenation algorithm (1983) Creating the patterns (patgen) Using the patterns (hyphenation) HTML and the soft hyphen The Port to Javascript Server side or Client side? How it works Differences and Improvements Back to the Future Hyphenation for Text layout without hyphenation HTML text-align: justify; Mathias Nater [email protected] http://mnn.ch/ Motivation layout w/o hyphenation layout with hyphenation The TEX hyphenation algorithm The original TEX hyphenation algorithm (1977) The current TEX hyphenation algorithm (1983) Creating the patterns (patgen) Using the patterns (hyphenation) HTML and the soft hyphen The Port to Javascript Server side or Client side? How it works Differences and Improvements Back to the Future Hyphenation for Text layout with hyphenation HTML text-align: left; Mathias Nater [email protected] http://mnn.ch/ Motivation layout w/o hyphenation layout with hyphenation The TEX hyphenation algorithm The original TEX hyphenation algorithm (1977) The current TEX hyphenation algorithm (1983) Creating the patterns (patgen) Using the patterns (hyphenation) HTML and the soft hyphen The Port to Javascript Server side or Client