CODEWITHSUNDEEP
androidhtmlcssfonts
Ken Shirriff
Ken Shirriff

Reputation: 1679

How to display an HTML monospaced arrow in the Android browser?

How can I display monospaced text that includes an arrow that is the same width as the other characters?

In Android Chrome, the arrow is inexplicably wider, as shown in the screenshot below, regardless of the font. I'd expect the arrows to be the same width as the other characters. On the desktop, the arrow character behaves as expected.

The wide arrow is making my text alignment look ugly. I've tried different fonts and different arrows without success. I couldn't get CSS to force the arrow to 1em width. (I don't know if the problem is Android-specific or happens on other phones.)

Screenshot on Android

Code:

<pre style="font-family: monospace">
IIIIIIII
MMMMMMMM
→→→→→→→→
</pre>

jsfiddle link

Upvotes: 0

Views: 497

Answers (1)

Naomi
Naomi

Reputation: 26

The problem is not cause by Android-specific, it's about the font didn't provide the marks. (e.g. ↑↓←→)

For example, you can see monospace fonts at Google Fonts only Nanum Gothic Coding provide the marks ( ↑↓←→↖↗↙↘ )

Google Fonts search results 1

Google Fonts search results 2

Google Fonts search results 3

Google Fonts search results 4

Upvotes: 1

Related Questions