Gutenberg: Japanese more tag text overflows in the editor.

[miminari]

In Japanese, more tag text is overflows in the editor.
'More' is translated as '続きを読む' in Japanese.
But we can just read '続きを' or '続きを読'.

The size attribute of input tag is not work in Japanese (and the other 2 byte languages, maybe)
properly.
So, could you add width of CSS at /core-blocks/more/edit.js ?

I think it better the CSS width value is value.length + 2 em.

Screenshots

Desktop:

• OS: macOS High Sierra 10.13.4
• Browser: chrome 68.0.3440.106, safari 11.1

Smartphone:

• Device: iPhoneX
• OS: iOS
• Browser safari
• Version 11.4.1

Additional context

• version of Gutenberg: 3.4.0

[pento]

Thank you for the bug report, @miminari! I agree this is not ideal, I'll create a fix for this shortly.

[waviaei]

Adding update of the screenshot, post 5.0 release, with dash line.

Also, I notice that the value of size attribute is different. How does it differ?

// en
<input type="text" size="10" value="Read more">

// ja
<input type="text" size="6" value="もっと読む">

• Mac OS: Mojave 10.14.2
• Chrome 70.0.3538.110
• WordPress 5.0

[gziolo]

It is still an issue. There is some prior work in #8751 done by @pento.

I think it also makes sense to re-share this comment from @aduth from the same PR:

I had an old local branch related to my comment at https://github.com/WordPress/gutenberg/pull/8751#issuecomment-413316009 . It works, but not in all browsers. I pushed it up in case it's of any future value:

https://github.com/WordPress/gutenberg/commits/add/autosize-input
Specifically: d5e6eb9e11a78daf0422b61e671efe57ccca7f03

I recall also going down some (evidently not-fruitful) rabbit holes in an attempt to find some solution reliably measure text width. If I recall correctly:

• via canvas
• via measuring the width of a (separate, cloned) inline contenteditable element allowed to grow

I hope that will help to resolve this issue.