hypher

The site uses [unjustifiable] together with [Hypher]. [unjustifiable]: https://www.npmjs.com/package/unjustifiable?activeTab=readme [Hypher]: https://github.com/bramstein/hypher

I think it’s already possible to get some of the way there on the web today (having fine-grained control and avoiding Walde-r’s). Check out Hypher (https://github.com/bramstein/hypher). If you’re using Gatsby and Markdown, I wrote a small plugin to be able to use it there: https://www.gatsbyjs.com/plugins/gatsby-remark-hypher/ and https://github.com/siawyoung/remark-hypher (An example of how it looks like: https://siawyoung.com)

yes, so as a general rule for any publishing scenario where hyphenation is important you have an automated solution, for example for a small company / single person you might set up something using https://github.com/bramstein/hypher or find a similar tool. Also this tends to be sort of overkill for what most people want so - as with most tech - gotta evaluate if it's worth the time and effort.

The justified alignment looks sub-par in places, like in the middle of the first paragraph of the example pages. Flush left alignment normally is the better option, if you don't have a hyphenation engine. Browser inserted Soft-Hyphens could fix this, but since they are language dependent browser support is spotty: https://developer.mozilla.org/en/docs/Web/CSS/hyphens#Sugges... By itself most browsers can break soft-hyphens pretty reliable, but they have to be generated first: See https://github.com/mnater/Hyphenator or https://github.com/bramstein/hypher

Any plans to integrate soft hyphenation out of the box? This makes block layouts look so much nicer. https://code.google.com/p/hyphenator/ https://github.com/bramstein/hypher Also this tool shouldn't obfuscate the text content if not explicitly wanted, which in the days of captcha reading OCRs is a desperate measure anyways and doesn't add to the accessibility of the page. Please add the rendered text in the alt attribute of the canvas by default. Or even better make it degrade gracefully to proper HTML by using some CSS replacement technique linking to the dataURL of the dynamically created off-screen canvas image. See HTMLCanvasElement.toDataURL()

[edit: I appreciate the constructive example, should've mentioned that.] Which unfortunately looks like crap, as there is no (standard) way to get browsers to hyphenate words in a sane way :-( [edit: I wish CSS Regions was (or was likely to become) a viable solution, as it actually does what a lot of people want: a sane and standard way to lay out text, based on experiences from dtp. Sadly, afaik, it's unlikely to be accepted, and I'm not sure if there's even a decent way to get it to work with a polyfill (suitable for production): http://dev.w3.org/csswg/css-regions/Overview.src.html https://github.com/adobe-webplatform/css-regions-polyfill In theory css-regions along with hyphenator or hypher should be enough to have layouts that are both semantic, look good, and are simple to implement. It's been a while since I tried to get it to actu

I agree, hyphenation is crucial to proper line breaking. If you don't mind a JavaScript solution you can have a look at: * http://code.google.com/p/hyphenator/ * https://github.com/bramstein/hypher/

Author of the JS implementation here. Let me know if you have any questions about the implementation or problems integrating it. I was hoping someone would pick it up and integrate it with Readability-like service. (I've slowly been working to add support for it to Treesaver http://www.treesaverjs.com/.) For hyphenation you might also want to check out my Hypher project (https://github.com/bramstein/Hypher) which is a minimal hyphenation engine written in JavaScript. In my benchmarks it is about 4 times faster than Hyphenator.js (and a lot smaller.)

Thanks for the reference. I have also recently released my own JavaScript hyphenation engine: https://github.com/bramstein/Hypher It is quite small and fast, and mostly aimed at integration with other libraries, unlike Hyphenator.js (which comes with a partial DOM library.) An example integration can be seen in the Treesaver library (https://github.com/bramstein/treesaver/tree/hyphenation) where it is used to hyphenate magazine columns.