Banthar Banthar - 3 months ago 9
CSS Question

Text changes height after adding unicode character

I have HTML element with text content.
Font is set to sans-serif in CSS.
Text is updated via JavaScript.
Sometimes contains just ASCII characters but, sometimes, includes "➜" character. See following snippet:



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 works fine in IE11 but in Chrome the element "wiggles":

text element changing size

It looks like this happens because different font is used to render "➜" character:

Arial—Local file(5 glyphs)
Segoe UI Symbol—Local file(1 glyph)


Is there a simple way to stabilize the height of whole element and position of static part of text?

One way seems to be using "Segoe UI Symbol" for whole element - but I prefer a different font for regular text.

Answer

Just add a line-height style to your element:

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;
  line-height: 1em;
}
<div id="text" />