1

I have a textarea with 10 columns, but apparently that is not enough to display 10 emoji.

How do I calculate the exact amount of needed cols to display 10 emoji?

<textarea cols="10" rows="4"></textarea>
Kokodoko
  • 26,167
  • 33
  • 120
  • 197
  • You shouldn't rely on `cols` and `rows` attrs because they can result with different views on different browsers. – Batu.Khan Dec 26 '18 at 12:50
  • What would you recommend to calculate the needed width in pixels for 10 emoji, say at font size 10px? It's not 10px per emoji. – Kokodoko Dec 26 '18 at 12:58
  • The `cols` attribute is not behave like exact character width, it is used to tell the browser how many **average-width** characters should fit on a single line. See more from here https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea and https://html.com/attributes/textarea-cols/ – johirpro Dec 26 '18 at 14:19
  • Would there be a way to know what that average width is for a particular font size, say `font-size:10px`? – Kokodoko Dec 26 '18 at 14:43
  • I realized I posted explaining why the problem happens, but didn't proposed a solution. @Kokodoko please see the edit and keep in mind the considerations about the mentioned inconsistency of `cols` as it does apply. – marcos assis Sep 15 '20 at 22:42

1 Answers1

2

This is because for emojis, the computed font is falling back to the next on the font-family, since the first font doesn't handle the emojis. See this answer.

See below the results rendered for this code [ubuntu 18.04] for Chrome and Firefox, and the fonts used in each case:

<textarea cols="10" rows="6">0123456789

</textarea>

enter image description here

enter image description here

Solution: add a emoji-capable font to your page and put it on the begining of the font-family or add the emoji default font for each browser you want to work with:

<textarea rows="6" style="width:10ch;overflow:hidden;resize:none;font-family:Twemoji Mozilla,Noto Color Emoji">
0123456789

</textarea>
marcos assis
  • 388
  • 2
  • 14