bustle/mobiledoc-kit

Multiple space → nbsp translation has poor line wrapping behavior

Opened this issue · 4 comments

andersk commented

mobiledoc-kit currently renders multiple consecutive spaces by replacing each space-space pair with space-nbsp (#209). Depending on the text width, this results in the left margin being misaligned when a line is wrapped at that point. Emphasizing nbsp with _ to illustrate the problem:

This is a sentence that is followed by two
spaces. _This is a sentence that is followed
by three spaces. _ This is another sentence.

This is a sentence that is
followed by two spaces.
_This is a sentence that is
followed by three spaces.
_ This is another sentence.

To fix this, it would be better to replace each sequence of n spaces with n − 1 nbsps followed by 1 space. This can be done with regexp lookahead:

text.replace(/ (?= )/g, "\u00A0")
This is a sentence that is followed by two
spaces._ This is a sentence that is followed
by three spaces.__ This is another sentence.

This is a sentence that is
followed by two spaces._
This is a sentence that is
followed by three spaces.__
This is another sentence.

It might be better to disable the nbsp translation entirely and rely on CSS white-space: pre-wrap, but that’d be a bigger change.

(The same issue is present in other repositories like mobiledoc-dom-renderer, mobiledoc-html-renderer, mobiledoc-apple-news-renderer; I assume I don’t need to file separate issues for each one.)

gpoitch commented

I believe this was fixed somewhere along the way. Can't reproduce in the demo.

gpoitch commented

Looks good in my browser
Screen Shot 2022-08-31 at 2 44 07 PM

andersk commented

Yeah, looks like WebKit handles the wrapping differently. Try it in Chromium or Firefox.