{"id":13721148,"url":"https://github.com/bramstein/typeset","last_synced_at":"2025-10-10T05:39:44.991Z","repository":{"id":1892856,"uuid":"2819010","full_name":"bramstein/typeset","owner":"bramstein","description":"TeX line breaking algorithm in JavaScript","archived":false,"fork":false,"pushed_at":"2023-05-25T13:55:59.000Z","size":306,"stargazers_count":1005,"open_issues_count":12,"forks_count":74,"subscribers_count":43,"default_branch":"master","last_synced_at":"2025-04-12T11:58:11.632Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-2-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bramstein.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2011-11-21T10:14:45.000Z","updated_at":"2025-03-12T23:47:55.000Z","dependencies_parsed_at":"2024-02-03T20:51:15.645Z","dependency_job_id":null,"html_url":"https://github.com/bramstein/typeset","commit_stats":{"total_commits":76,"total_committers":10,"mean_commits":7.6,"dds":"0.21052631578947367","last_synced_commit":"619fadd8b66db6b32ec810a2a51035e772042223"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bramstein%2Ftypeset","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bramstein%2Ftypeset/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bramstein%2Ftypeset/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bramstein%2Ftypeset/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bramstein","download_url":"https://codeload.github.com/bramstein/typeset/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254553959,"owners_count":22090417,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-03T01:01:12.944Z","updated_at":"2025-10-10T05:39:39.943Z","avatar_url":"https://github.com/bramstein.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"## TeX line breaking algorithm in JavaScript\n\nThis is an implementation of the [Knuth and Plass line breaking algorithm](http://www3.interscience.wiley.com/journal/113445055/abstract) using JavaScript. The goal of this project is to optimally set justified text in the browser, and ultimately provide a library for various line breaking algorithms in JavaScript.\n\nThe paragraph below is set using a JavaScript implementation of the classic Knuth and Plass algorithm as used in TeX. The numbers on the right of each line are the stretching or shrinking ratio compared to the optimal line width. This example uses a default space of 1/3 em, with a stretchability and shrink-ability of 1/6 em and 1/9 em respectively.\n\n![](https://github.com/bramstein/typeset/raw/master/typeset-with-ratio.png)\n\nThe following paragraph is set by a browser using `text-align: justify`. Notice the lines in the paragraph have, on average, greater inter-word spacing than the Knuth and Plass version, which is successful at minimizing the inter-word spacing over all lines.\n\n![](https://github.com/bramstein/typeset/raw/master/typeset-browser.png)\n\nThe browser also ends up with ten lines instead of the nine lines found by the Knuth and Plass line breaking algorithm. This comparison might not be completely fair since we don't know the default inter-word space used by the browser (nor its stretching and shrinking parameters.) Experimental results however indicate the values used in most browsers are either identical or very similar. The next section explains how the ratio values for the browser were calculated.\n\n### Measuring the quality of browser line breaks\n\nUnfortunately there is no API to retrieve the positions of the line breaks the browser inserted, so we'll have to resort to some trickery. By wrapping each word in an invisible `\u003cspan\u003e` element and retrieving its `y` position we can find out when a new line starts. If the `y` position of the current word is different from the previous word we know a new line has started. This way a paragraph is split up in several individual lines.\n\nThe ratios are then calculated by measuring the difference between the width of each line when `text-align` is set to `justify` and when it is set to `left`. This difference is then divided by the amount of stretchability of the line: i.e. the number of spaces multiplied by the stretch width for spaces. Although we don't know the actual stretchability we can use 1/6 em, just like the Knuth and Plass algorithm, if we only use it for comparison.\n\n### Assisted browser line breaks\n\nThe line breaking algorithm can also be used to correct the line breaks made by the browser. The easiest way to do is to split a text up into lines and adjust the CSS `word-spacing` property. Unfortunately, Webkit based browsers do not support sub-pixel word-spacing. Alternatively, we can absolute position each word or split the line into segmants with integer word spacing. You can see the latter approach in action on the [Flatland line breaking example.](examples/flatland/)\n\n### Examples\n\nThe line breaking algorithm is not only capable of justifying text, it can perform all sorts of alignment with an appropriate selection of boxes, glue and penalties. It is also possible to give it varying line widths to flow text around illustrations, asides or quotes. Alternatively, varying line widths can be used to create interesting text shapes as demonstrated below.\n\n#### Ragged right and centered alignment\n\nThe following example is set ragged right. Ragged right is not simply justified text with fixed width inter-word spacing. Instead the algorithm tries to minimize the amount of white space at the end of each sentence over the whole paragraph. It also attempts to reduce the number of words that are \"sticking out\" of the margin.\n\n![](https://github.com/bramstein/typeset/raw/master/typeset-right.png)\n\nRagged left text can be achieved by using a ragged right text and aligning its line endings with the left border. The example below is set centered. Again this is not simply a centering of justified text, but instead an attempt at minimizing the line lengths over the whole paragraph.\n\n![](https://github.com/bramstein/typeset/raw/master/typeset-centered.png)\n\n#### Variable line width\n\nBy varying the line width for a paragraph it is possible to flow the text around illustrations, asides, quotes and such. The example below leaves a gap for an illustration by setting the line widths temporarily shorter and then reverting. You can also see that the algorithm chose to hyphenate certain words to achieve acceptable line breaking.\n\n![](https://github.com/bramstein/typeset/raw/master/typeset-flow.png)\n\nIt is also possible to make some non-rectangular shapes, as shown in the examples below. In the first example, the text is laid out using an increasing line width and center aligning each line. This creates a triangular shape.\n\n![](https://github.com/bramstein/typeset/raw/master/typeset-triangle.png)\n\nUsing some basic math it is also possible to set text in circles or even arbitrary polygons. Below is an example of text set inside a circle.\n\n![](https://github.com/bramstein/typeset/raw/master/typeset-circle.png)\n\n### To-do\n\nThe following are some extensions to the algorithm discussed in the original paper, which I intend to implement (at some point.)\n\n* [Hanging punctuation](http://en.wikipedia.org/wiki/Hanging_punctuation). The following quote from the original paper explains how to implement it using the box, glue and penalty model:\n\n   \u003e Some people prefer to have the right edge of their text look ‘solid’,\n   \u003e by setting periods, commas, and other punctuation marks (including\n   \u003e inserted hyphens) in the right-hand margin. For example, this practice\n   \u003e is occasionally used in contemporary advertising.\n\n   \u003e It is easy to get inserted hyphens into the margin: We simply let the\n   \u003e width of the corresponding penalty item be zero. And it is almost as\n   \u003e easy to do the same for periods and other symbols, by putting every such\n   \u003e character in a box of width zero and adding the actual symbol width to\n   \u003e the glue that follows. If no break occurs at this glue, the accumulated\n   \u003e width is the same as before; and if a break does occur, the line will be\n   \u003e justified as if the period or other symbol were not present.\n\n* Compare quality against line-breaking implemented by [Internet Explorer's `text-justify` CSS property](http://msdn.microsoft.com/en-us/library/ms534671%28VS.85%29.aspx).\n* Figure out how to deal with dynamic paragraphs (i.e. paragraphs being edited) as their ratios will change during editing and thus visibly move around.\n\n### References\n\nThese are the resources I found most useful while implementing the line breaking algorithm.\n\n* [Digital Typography, Donald E. Knuth](http://www.amazon.com/Digital-Typography-Center-Language-Information/dp/1575860104/)\n* [Breaking paragraphs into lines, Donald E. Knuth, Michael F. Plass](http://www3.interscience.wiley.com/journal/113445055/abstract)\n* [Knuth \u0026 Plass line-breaking Revisited](http://defoe.sourceforge.net/folio/knuth-plass.html)\n* [Wikipedia: Word wrap](http://en.wikipedia.org/w/index.php?title=Word_wrap)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbramstein%2Ftypeset","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbramstein%2Ftypeset","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbramstein%2Ftypeset/lists"}