Skip to content

Instantly share code, notes, and snippets.

@sttk

sttk/rootFontSize.html

Last active March 31, 2017 12:34
Show Gist options
  • Save sttk/c2b77fc86a7e79b34464bcb050e205f7 to your computer and use it in GitHub Desktop.
Save sttk/c2b77fc86a7e79b34464bcb050e205f7 to your computer and use it in GitHub Desktop.
Download ZIP
Root Font Size
Raw
rootFontSize.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>root font size</title>
<style>
div#d1 { background-color: #fdd; }
div#d2 { background-color: #fbb; }
div#d3 { background-color: #f99; }
div#d1 > span { background-color: #99f; }
div#d2 > span { background-color: #66f; }
div#d3 > span { background-color: #33f; }
</style>
<style>
html, div, span { padding: 0px; margin: 0px; border:none; }
html, div, span { line-height:100%; }
span { display: inline-block; }
</style>
<style id="case2">
/*
html { font-size: 100000px; }
#d1 { font-size: 100000px; }
#d2 { font-size: 100000px; }
#d3 { font-size: 100000px; }
*/
</style>
<style id="case3">
/*
html { font-size: 1000px; }
#d1 { font-size: 100em; }
#d2 { font-size: 100em; }
#d3 { font-size: 100em; }
*/
</style>
<style id="case4">
/*
html { font-size: 100px; }
#d1 { font-size: 10rem; }
#d2 { font-size: 10rem; }
#d3 { font-size: 10rem; }
*/
</style>
<script>
window.addEventListener('load', function(event) {
var outputDiv = document.querySelector('#output');
var div1 = document.querySelector('#d1');
var div2 = document.querySelector('#d2');
var div3 = document.querySelector('#d3');
var span1 = document.querySelector('#d1>span');
var span2 = document.querySelector('#d2>span');
var span3 = document.querySelector('#d3>span');
console.log('div1 : ' + div1.offsetHeight + 'px');
console.log('div2 : ' + div2.offsetHeight + 'px');
console.log('div3 : ' + div3.offsetHeight + 'px');
console.log('span1 : ' + span1.offsetHeight + 'px');
console.log('span2 : ' + span2.offsetHeight + 'px');
console.log('span3 : ' + span3.offsetHeight + 'px');
});
</script>
</head>
<body>
<div id="d1">
<span>&#160;</span>
<div id="d2">
<span>&#160;</span>
<div id="d3">
<span>&#160;</span>
</div>
</div>
</div>
</body>
</html>
Raw
rootFontSize.md

Root Font Size

List of units

px

is pixel count.

em

is relative scale to a parent.

rem

is relative scale to root (html element).

Experiments

Method

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8"/>
 <title>root font size</title>
 <style>
  html, div, span { padding: 0px; margin: 0px; border:none; }
  html { font-size: 1000px; }
  #d1 { font-size: 100em; }
  #d2 { font-size: 100em; }
  #d3 { font-size: 100em; }
 </style>
</head>
<body>
 <div id="d1">
  <span>&#160;</span>
  <div id="d2">
   <span>&#160;</span>
   <div id="d3">
    <span>&#160;</span>
   </div>
  </div>
 </div>
</body>
</html>

Get offsetHeight of all divs and spans above in following cases.

  1. no style.
  2. html font-size is 1000px and all divs' font-size is 1000px.
  3. html font-size is 1000px and all divs' font-size is 100em.
  4. html font-size is 1000px and all divs' font-size is 100rem.

Result

case 1. no style

OS Browser div1 div2 div3 span1 span2 span3
Mac OS X Firefox 58 38 19 16 16 16
Chrome 54 36 18 18 18 18
Safari 54 36 18 18 18 18
Vivaldi 54 36 18 18 18 18
Win7 IE11 55 37 18 18 18 18
Firefox 60 40 20 19 19 19
Chrome 48 32 16 16 16 16
Vivaldi 54 36 18 17 17 17
Win10 Edge 55 37 18 18 18 18
IE11 55 37 18 18 18 18
Firefox 60 40 20 19 19 19
Chrome 48 32 16 16 16 16
Vivaldi 54 36 18 17 17 17
Linux Firefox 57 38 19 19 19 19
Chrome 54 36 18 17 17 17
Vivaldi 54 36 18 17 17 17

case 2. html's font-size:1000px and div's font-size: 1000px

OS Browser div1 div2 div3 span1 span2 span3
Mac OS X Firefox 3600 2400 1200 1000 1000 1000
Chrome 3450 2300 1150 1150 1150 1150
Safari 3450 2300 1150 1150 1150 1150
Vivaldi 3450 2300 1150 1150 1150 1150
Win7 IE11 3450 2300 1150 1150 1150 1150
Firefox 3447 2298 1149 1107 1107 1107
Chrome 3000 2000 1000 1000 1000 1000
Vivaldi 3447 2298 1149 1107 1107 1107
Win10 Edge 3450 2300 1150 1150 1150 1150
Firefox 3450 2300 1150 1150 1150 1150
Chrome 3000 2000 1000 1000 1000 1000
Vivaldi 3447 2298 1149 1149 1149 1149
Linux Firefox 3600 2400 1200 1168 1168 1168
Chrome 3447 2298 1149 1107 1107 1107
Vivaldi 3447 2298 1149 1107 1107 1107

case 3. html's font-size:1000px and div's font-size: 100em

OS Browser div1 div2 div3 span1 span2 span3
Mac OS X Firefox 7200 4800 2400 2000 2000 2000
Chrome 34500 23000 11500 115000 11500 11500
Safari 2415000 2300000 1150000 1150000 1150000 1150000
Vivaldi 2415000 2300000 1150000 1150000 1150000 1150000
Win7 IE11 11614013 11499023 0 114990 11499023 0
Firefox 6900 4000 2300 2215 2215 2215
Chrome 300000 20000 10000 10000 10000 10000
Vivaldi 2414794 2299804 1149902 110742 1107422 1107422
Win10 Edge 11614014 11499024 0 114990 11499023 0
IE11 11614014 11499024 0 114990 11499023 0
Firefox 6900 4600 2300 2215 2215 2215
Chrome 30000 20000 10000 10000 10000 10000
Vivaldi 2414794 2299804 1149902 110742 1107422 1107422
Linux Firefox 3600 2400 1200 1168 1168 1168
Chrome 34497 22998 11499 11074 11074 11074
Vivaldi 2414794 2299804 1149902 110742 1107422 1107422

case 4. html's font-size:1000px and div's font-size: 100rem

OS Browser div1 div2 div3 span1 span2 span3
Mac OS X Firefox 7200 4800 2400 2000 2000 2000
Chrome 34500 23000 11500 11500 11500 11500
Safari 345000 230000 115000 115000 115000 115000
Vivaldi 345000 230000 115000 115000 115000 115000
Win7 IE11 344971 229980 114990 114990 114990 114990
Firefox 6900 4600 2300 2215 2215 2215
Chrome 30000 20000 10000 10000 10000 10000
Vivaldi 344970 229980 114990 110742 110742 110742
Win10 Edge 3450 2300 1150 1150 1150 1150
IE11 3450 2300 1150 1150 1150 1150
Firefox 3447 2298 1149 1107 1107 1107
Chrome 3000 2000 1000 1000 1000 1000
Vivaldi 3450 2300 1150 1150 1150 1150
Linux Firefox 3600 2400 1200 1168 1168 1168
Chrome 34497 22998 11499 11074 11074 11074
Vivaldi 344978 229988 114990 110742 110742 110742

Correction

Method

html, div, span { line-height: 100%; }

Result

case 1. no style

OS Browser div1 div2 div3 span1 span2 span3
Mac OS X Firefox 48 32 16 16 16 16
Chrome 48 32 16 18 18 18
Safari 48 32 16 18 18 18
Vivaldi 48 32 16 18 18 18
Win7 IE11 48 32 16 18 18 18
Firefox 48 32 16 19 19 19
Chrome 48 32 16 16 16 16
Vivaldi 48 32 16 17 17 17
Win10 Edge 48 32 16 18 18 18
IE11 48 32 16 18 18 18
Firefox 48 32 16 19 19 19
Chrome 48 32 16 16 16 16
Vivaldi 48 32 16 17 17 17
Linux Firefox 48 32 16 19 19 19
Chrome 48 32 16 17 17 17
Vivaldi 48 32 16 17 17 17

case 2. html's font-size:1000px and div's font-size: 1000px

OS Browser div1 div2 div3 span1 span2 span3
Mac OS X Firefox 3000 2000 1000 1000 1000 1000
Chrome 3000 2000 1000 1150 1150 1150
Safari 3000 2000 1000 1150 1150 1150
Vivaldi 3000 2000 1000 1150 1150 1150
Win7 IE11 3000 2000 1000 1150 1150 1150
Firefox 3000 2000 1000 1107 1107 1107
Chrome 3000 2000 1000 1000 1000 1000
Vivaldi 3000 2000 1000 1107 1107 1107
Win10 Edge 3000 2000 1000 1150 1150 1150
Firefox 3000 2000 1000 1107 1107 1107
Chrome 3000 2000 1000 1000 1000 1000
Vivaldi 3000 2000 1000 1107 1107 1107
Linux Firefox 3000 2000 1000 1168 1168 1168
Chrome 3000 2000 1000 1107 1107 1107
Vivaldi 3000 2000 1000 1107 1107 1107

case 4. html's font-size:1000px and div's font-size: 100rem

OS Browser div1 div2 div3 span1 span2 span3
Mac OS X Firefox 300000 200000 100000 2000 2000 2000
Chrome 30000 20000 10000 11500 11500 11500
Safari 300000 200000 100000 115000 115000 115000
Vivaldi 300000 200000 100000 115000 115000 115000
Win7 IE11 300000 200000 100000 114990 114990 114990
Firefox 300000 200000 100000 2215 2216 2115
Chrome 30000 20000 10000 10000 10000 10000
Vivaldi 300000 200000 100000 110742 110742 110742
Win10 Edge 300000 200000 100000 114990 114990 114990
IE11 300000 200000 100000 114990 114990 114990
Firefox 300000 200000 100000 2215 2215 2215
Chrome 30000 20000 10000 10000 10000 10000
Vivaldi 300000 200000 100000 110742 110742 110742
Linux Firefox 300000 200000 100000 1168 1168 1168
Chrome 300000 200000 100000 110742 110742 110742
Vivaldi 300000 200000 100000 110742 110742 110742

Correction - 2

Method

html, div, span { line-height: 100%; }
span { display: inline-block; }

Result

case 1. no style

OS Browser div1 div2 div3 span1 span2 span3
Mac OS X Firefox 48 32 16 16 16 16
Chrome 48 32 16 16 16 16
Safari 48 32 16 16 16 16
Vivaldi 48 32 16 16 16 16
Win7 IE11 48 32 16 16 16 16
Firefox 48 32 16 16 16 16
Chrome 48 32 16 16 16 16
Vivaldi 48 32 16 16 16 16
Win10 Edge 48 32 16 16 16 16
IE11 48 32 16 16 16 16
Firefox 48 32 16 16 16 16
Chrome 48 32 16 16 16 16
Vivaldi 48 32 16 16 16 16
Linux Firefox 48 32 16 16 16 16
Chrome 48 32 16 16 16 16
Vivaldi 48 32 16 16 16 16

case 2. html's font-size:1000px and div's font-size: 1000px

OS Browser div1 div2 div3 span1 span2 span3
Mac OS X Firefox 3000 2000 1000 1000 1000 1000
Chrome 3000 2000 1000 1000 1000 1000
Safari 3000 2000 1000 1000 1000 1000
Vivaldi 3000 2000 1000 1000 1000 1000
Win7 IE11 3000 2000 1000 1000 1000 1000
Firefox 3000 2000 1000 1000 1000 1000
Chrome 3000 2000 1000 1000 1000 1000
Vivaldi 3000 2000 1000 1000 1000 1000
Win10 Edge 3000 2000 1000 1000 1000 1000
IE11 3000 2000 1000 1000 1000 1000
Firefox 3000 2000 1000 1000 1000 1000
Chrome 3000 2000 1000 1000 1000 1000
Vivaldi 3000 2000 1000 1000 1000 1000
Linux Firefox 3000 2000 1000 1000 1000 1000
Chrome 3000 2000 1000 1000 1000 1000
Vivaldi 3000 2000 1000 1000 1000 1000

case 4. html's font-size:1000px and div's font-size: 100rem

OS Browser div1 div2 div3 span1 span2 span3
Mac OS X Firefox 300000 200000 100000 100000 100000 100000
Chrome 30000 20000 10000 10000 10000 10000
Safari 300000 200000 100000 100000 100000 100000
Vivaldi 300000 200000 100000 100000 100000 100000
Win7 IE11 300000 200000 100000 100000 100000 100000
Firefox 300000 200000 100000 100000 100000 100000
Chrome 30000 20000 10000 10000 10000 10000
Vivaldi 300000 200000 100000 100000 100000 100000
Win10 Edge 300000 200000 100000 100000 100000 100000
IE11 300000 200000 100000 100000 100000 100000
Firefox 300000 200000 100000 100000 100000 100000
Chrome 30000 20000 10000 10000 10000 10000
Vivaldi 300000 200000 100000 100000 100000 100000
Linux Firefox 300000 200000 100000 100000 100000 100000
Chrome 300000 200000 100000 100000 100000 100000
Vivaldi 300000 200000 100000 100000 100000 100000

Research whether chrome's differences are by it's limitations.

Method

  1. --
  2. html font-size is 100000px and all divs' font-size is 100000px.
  3. --
  4. html font-size is 100px and all divs' font-size is 10rem.

and

html, div, span { line-height: 100%; }
span { display: inline-block; }

Result

case 2. html's font-size:100000px and div's font-size: 100000px

OS Browser div1 div2 div3 span1 span2 span3
Mac OS X Firefox 300000 200000 100000 100000 100000 100000
Chrome 30000 20000 10000 10000 10000 10000
Safari 300000 200000 100000 100000 100000 100000
Vivaldi 300000 200000 100000 100000 100000 100000
Win7 IE11 300000 200000 100000 100000 100000 100000
Firefox 300000 200000 100000 100000 100000 100000
Chrome 30000 20000 10000 10000 10000 10000
Vivaldi 300000 200000 100000 100000 100000 100000
Win10 Edge 300000 200000 100000 100000 100000 100000
IE11 300000 200000 100000 100000 100000 100000
Firefox 300000 200000 100000 100000 100000 100000
Chrome 30000 20000 10000 10000 10000 10000
Vivaldi 300000 200000 100000 100000 100000 100000
Linux Firefox 300000 200000 100000 100000 100000 100000
Chrome 30000 20000 10000 10000 10000 10000
Vivaldi 300000 200000 100000 100000 100000 100000

Also in unit 'px', chrome's limitations are appeared.

case 4. html's font-size:100px and div's font-size: 10rem

OS Browser div1 div2 div3 span1 span2 span3
Mac OS X Firefox 3000 2000 1000 1000 1000 1000
Chrome 3000 2000 1000 1000 1000 1000
Safari 3000 2000 1000 1000 1000 1000
Vivaldi 3000 2000 1000 1000 1000 1000
Win7 IE11 3000 2000 1000 1000 1000 1000
Firefox 3000 2000 1000 1000 1000 1000
Chrome 3000 2000 1000 1000 1000 1000
Vivaldi 3000 2000 1000 1000 1000 1000
Win10 Edge 3000 2000 1000 1000 1000 1000
IE11 3000 2000 1000 1000 1000 1000
Firefox 3000 2000 1000 1000 1000 1000
Chrome 3000 2000 1000 1000 1000 1000
Vivaldi 3000 2000 1000 1000 1000 1000
Linux Firefox 3000 2000 1000 1000 1000 1000
Chrome 3000 2000 1000 1000 1000 1000
Vivaldi 3000 2000 1000 1000 1000 1000

In not too large size, chrome calculates same sizes with other browsers.

Conclusion

Following style setting can make same sizes between browsers.

html, div, span { line-height: 100%; }
span { display: inline-block; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment