google/budou

Span, Zero-width space, or wbr elements?

murata2makoto opened this issue · 3 comments

I just learned this nice work. It is particularly useful for dyslexia people.

In a meeting of the Japanese DAISY project for textbooks, we discussed how hints for line breaking should be represented. The use of span elements was suggested. But people do not want to use span elements for this purpose, because DAISY textbooks already too heavily use span elements for multi-media synchronization. Thus, Keio Advanced Publishing Laboratory is inclined to adopt the zero-width space or wbr elements. Florian's personal draft is based on this assumption. See w3c/jlreq#17

Hi Murata-san,
Thank you so much for your suggestion! The original intent of using inline-block SPAN tags is that a chunk wraps nicely when the screen is too narrow. Please see this example below.
https://jsfiddle.net/v3c2kxy9/1/
As shown here, sentences with zero-width spaces or WBR elements overflow if the parent element is narrow compared to the child chunks. This is a common case with display ads, for example.
Having that said, I'm happy to support zero-width space and WBR element as exporting options since they should be useful in certain cases such as e-books. The change should be trivial, so I think I can work on this feature in the near future.

I see what you mean. My scenario is a bit different from yours.

If you provide some easy mechanisms for allowing dyslexia people to use your technology (using wbr and word-break keep-all) for browsing existing HTML pages, you will become a hero.

This is still experimental, but I've added a feature to serialize with WBR tags.

$ budou --wbr  "今日は快晴です。"
<span style="word-break: keep-all;">今日は<wbr></wbr>快晴です。</span>

Result preview: https://codepen.io/tushuhei/pen/OJJvEzR