I create two span elements and add them to the DOM with visibility = hidden. After adding both span elements to the DOM, I get the width and height of both elements.
Surprisingly, the width and height are different.
text, font size, font family are all the same in both ranges. What could be causing the size difference?
var sp1 = goog.dom.createDom('span', null); sp1.innerText = text; sp1.style.fontSize = "60px"; sp1.style.fontFamily = family; sp1.style.visibility = "hidden"; goog.dom.appendChild(document.body, sp1); var sp2 = goog.dom.createDom('span', null); sp2.innerText = text; sp2.style.fontSize = "60px"; sp2.style.fontFamily = family; sp2.style.visibility = "hidden"; goog.dom.appendChild(document.body, sp2); var sz1 = goog.style.getSize(sp1); var sz2 = goog.style.getSize(sp2); assert(sz1 == sz2)
HTML pages
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link type="text/css" rel="stylesheet" href="ff.css"> <style> #id3{ font-family: abracadabra, Orator W01 Slanted; } #id4{ font-family: Alpha Jazz W00 Regular, Orator W01 Slanted, Times New Roman, sans-serif; } </style> <title>Web Fonts</title> </head> <body> <div id="id1">1. Quick Brown Fox Jumps over the Lazy Dog</div> <div id="id2">2. Quick Brown Fox Jumps over the Lazy Dog</div> <div id="id3">3. Quick Brown Fox Jumps over the Lazy Dog</div> <div id="id4">4. Quick Brown Fox Jumps over the Lazy Dog</div> <div id="test1" style="position: absolute; top: 0px; z-index: 2; width: auto; right: 0px; background-color: rgb(255, 0, 0); display: none;"> <div style="border-bottom-width: 5px; border-bottom-style: solid; border-bottom-color: rgb(8, 12, 18); padding: 10px 5px;"> <div style="float: left; background-image: url(logo.png); padding-left: 25px; color: rgb(0, 0, 0); font-size: 18px; background-position: 0% 50%; background-repeat: no-repeat no-repeat;">test</div> <div style="float: right;"><img src="logo.png" style="margin: 0px;"></div> <div class="clear"></div> </div> <div id="test2"></div> <div id="test3"></div> </div> </div> <span style="font-size: 60px; font-family: Helvetica; visibility: hidden;">3. Quick Brown Fox Jumps over the Lazy Dog</span> <span style="font-size: 60px; font-family: Helvetica; visibility: hidden;">3. Quick Brown Fox Jumps over the Lazy Dog</span> </body> </html>
A space in questions is two spaces at the end of an html document.
1st size = (1217, 67)
The size of the second = (1267, 136)
source share