-
Notifications
You must be signed in to change notification settings - Fork 14
/
font-size-rounding.html
56 lines (50 loc) · 1.93 KB
/
font-size-rounding.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Font Size Rounding</title>
<style type="text/css">
body {font: 1em sans-serif;}
b {padding: 0.33em;}
div {border-top: 1px solid #666; margin: 2em 0;}
div > p:first-child {background: #9B9; color: #FFF; border-bottom: 1px solid #898;
margin: 0; padding: 0.2em 0.5em 0.1em; font-size: smaller; font-style: italic;}
div p.test {font-size: 10px;}
#tc01 b {font-size: 1.04em;}
#tc02 b {font-size: 1.2em;}
</style>
<script type="text/javascript">
<!--
function showSizes() {
var bs = document.getElementsByTagName('b');
var bsl = bs.length;
for (i = 0; i < bsl; i++) {
var obj = bs[i];
obj.innerHTML += " " + window.getComputedStyle(obj,null).getPropertyValue('font-size');
if (i > 100) {alert('Runaway loop!'); break;}
}
}
//-->
</script>
</head>
<body>
<a href="javascript: showSizes();">insert <code>getComputedStyle</code> sizes</a>
<div id="tc01">
<p>b {font-size: 1.04em;}</p>
<p class="test">
Nesting: <b>(1<b>(2<b>(3<b>(4<b>(5<b>(6<b>(7<b>(8<b>(9<b>(10)</b>)</b>)</b>)</b>)</b>)</b>)</b>)</b>)</b>)</b>
</p>
</div>
<div id="tc02">
<p>b {font-size: 1.2em;}</p>
<p class="test">
Nesting: <b>(1<b>(2<b>(3<b>(4<b>(5<b>(6<b>(7<b>(8<b>(9<b>(10)</b>)</b>)</b>)</b>)</b>)</b>)</b>)</b>)</b>)</b>
</p>
</div>
<div>
<p>(Sub-pixel font sizing, running from 10px to 11px)</p>
<p>
<span style="font-size: 10px;">O</span><span style="font-size: 10.1px;">O</span><span style="font-size: 10.2px;">O</span><span style="font-size: 10.3px;">O</span><span style="font-size: 10.4px;">O</span><span style="font-size: 10.49px;">O</span><span style="font-size: 10.5px;">O</span><span style="font-size: 10.51px;">O</span><span style="font-size: 10.6px;">O</span><span style="font-size: 10.7px;">O</span><span style="font-size: 10.8px;">O</span><span style="font-size: 10.9px;">O</span><span style="font-size: 11px;">O</span></p>
</div>
</body>
</html>