sapegin/richtypo.js

Non breaking space rendered as unicode

Closed this issue · 10 comments

Hey - sorry but I'm not sure I understand why richtypo renders non breaking space in unicode \xA0 rather than html nbsp;? In my situation, I'm using element.innerHTML = richtypo.full(text) and unicode spaces are not rendered in html.

It seems like cleanup_after is responsible for this. I've forked the repo to make richtypo behave like I think it should (ie doing all transformations using unicode characters and substituting these characters with corresponding html entities after the whole process).

https://github.com/dbismut/richtypo.js

Obviously most of the tests fail :)

That's by design: one character is shorter than six. You could make a wrapper function like this for your use case:

const typo = text => richtypo.full(text)
  .replace(/\xA0/g, ' ');

@sapegin Thanks for your answer. But \xA0 isn't rendered in HTML by the browser right?
What is confusing me is that hairspace is associated with   when you could have had the corresponding unicode character?

Btw,   is breakable, you should use  , which corresponding unicode character is \xAF.

But \xA0 isn't rendered in HTML by the browser right

It is, it's the same as  .

Btw,   is breakable, you should use  , which corresponding unicode character is \xAF.

Good points! Mind sending a pull request to fix that? ;-)

Done: \xAF doesn't actually render in HTML so I've kept  . I've also added French rules with a punctuation rules that adds thin spaces before :;!?» and after «.

Grawl commented

just faced this problem when uvue SSR bail hydration and performs full client-side render because of \xAF replaced to   in component prop.

Hey @Grawl can you be a bit more specific as I don't remember this issue vividly TBH :)

Grawl commented

When Node backend of Universal Vue creates HTML for response it converts \xAF to  .

But on client render Vue gets response with \xAF.

Because of different HTML from server and from Vue render, SSR does full client render instead of hydration.

Hey @Grawl is that specific to Universal Vue? I've made a quick test with Gatsby and I'm not running into the same issue (well actually Chrome seems to convert \xAF to   in the Inspector but not in View Source 🤯). In any case, maybe we should use   to avoid any issue.

@sapegin what do you think?

If you need  , you can make a custom rule to convert \xAF to  . We can even include it in richtypo-rules-common (feel free to send a pull request) but I don't think it should be the default behavior.

Grawl commented

is that specific to Universal Vue

@dbismut looks like you're right