ch-width-1.html (1644B)
1 <!DOCTYPE html> 2 <style> 3 body { 4 font-family: courier new, courier, monospace; 5 line-height: 1; 6 } 7 div { 8 width: 120px; 9 float: left; 10 } 11 span { 12 display: inline-block; 13 height: 1em; 14 } 15 span.a { 16 background: red; 17 } 18 span.b { 19 position: relative; 20 top: -1em; 21 height: 1em; 22 background: lightgreen; 23 } 24 </style> 25 <p>No red should appear at the tips of the rectangles:</p> 26 <script> 27 for (var i = 10; i <= 16; i++) { 28 var div = document.createElement("div"); 29 div.style.fontSize = i + "px"; 30 document.body.appendChild(div); 31 for (var j = 1; j <= 10; j++) { 32 // create a red span with width specified in 'ch' units 33 var a = document.createElement("span"); 34 a.className = "a"; 35 a.style.width = j + "ch"; 36 a.textContent = "\xA0"; 37 div.appendChild(a); 38 div.appendChild(document.createElement("br")); 39 // overlay it with a green span containing the equivalent number of chars 40 var b = document.createElement("span"); 41 b.className = "b"; 42 b.textContent = "\xA0".repeat(j); 43 div.appendChild(b); 44 div.appendChild(document.createElement("br")); 45 } 46 for (var j = 1; j <= 10; j++) { 47 // create a red span containing a specific number of chars 48 var a = document.createElement("span"); 49 a.className = "a"; 50 a.textContent = "\xA0".repeat(j); 51 div.appendChild(a); 52 div.appendChild(document.createElement("br")); 53 // overlay it with a green span with width specified in 'ch' units 54 var b = document.createElement("span"); 55 b.className = "b"; 56 b.style.width = j + "ch"; 57 b.textContent = "\xA0"; 58 div.appendChild(b); 59 div.appendChild(document.createElement("br")); 60 } 61 } 62 </script>