I'm working with an HTML element that has text content. The font is set to sans-serif in the CSS, and the text is updated through JavaScript. Sometimes, the text contains just ASCII characters, but other times it includes the "➜" character. You can see an example snippet below:
var text = document.getElementById("text");
var chars = "A➜";
var i = 0;
function update() {
i=1-i;
text.innerText = "char: " + chars[i];
setTimeout(update, 500);
}
update();div {
font-family: sans-serif;
background-color: lightgrey;
}<div id="text" />This functionality works correctly in IE11, however in Chrome the element appears to "wiggle":
https://i.sstatic.net/HQiJg.gif
It seems that this issue occurs because different fonts are used to render the "➜" character:
Arial—Local file(5 glyphs)
Segoe UI Symbol—Local file(1 glyph)
Is there a simple way to stabilize the height of the entire element and position the static part of the text?
One solution could be to use "Segoe UI Symbol" for the entire element, but I would prefer a different font for the regular text.