Font size is different in different browser and different OS and for different language

Question

I have 5 languages, when I change some of the languages, the font size is altering, my perfect font size is in google chrome, windows OS, and it is different in Mozilla windows, google chrome MAC OS, Mozilla MAC OS

Answer 1

I had similar(?) problem where English letters were bigger than Hebrew letters for some font. Since it's anyway for display purposes, I allowed myself to run a javascript on page load to fix it.

var EnglishCharFixer = {

  do_body: function() {
    this.do_elem(document.body);
  },

  do_elem: function(elem) {
    var nodes = this.textNodesUnder(elem);
    this.process_text_nodes(nodes)
  },

  textNodesUnder: function(node) {
    var all = [];
    for (node = node.firstChild; node; node = node.nextSibling) {
      if (node.nodeType == 3) all.push(node);
      else all = all.concat(this.textNodesUnder(node));
    }
    return all;
  },

  replace_node: function(node, str) {
    var replacementNode = document.createElement('span');
    replacementNode.innerHTML = str
    node.parentNode.insertBefore(replacementNode, node);
    node.parentNode.removeChild(node);
  },

  decorate_english: function(str, cls) {
    var a = []
    for (var i = 0; i < str.length; i++) {
      var c = str.charAt(i);
      if (c >= 'a' && c <= 'z' || c >= 'A' && c <= 'Z' || c == '@') {
        a.push("<span class=\"" + cls + "\">" + c + "</span>")
      } else {
        a.push(c)
      }
    }
    return a.join("")
  },

  process_text_nodes: function(nodes) {
    for (var index = 0; index < nodes.length; index++) {
      var node = nodes[index];
      var value = node.nodeValue
      var str = this.decorate_english(value, "eng2")
      if (str != value) {
        this.replace_node(node, str)
      }
    }

  }
}

EnglishCharFixer.do_body();

div {
  font-size: 24px;
}

.eng2 {
  font-size: 50%;
}

<div>
  Hello world שלום עולם
</div>