root-relative-units.html

<!DOCTYPE html><html><head><meta charset="utf-8" /><title>Root-relative units</title><style type="text/css">html {	font-size: 40px;	line-height: 80px;}table {	font-size: 0.5em;	line-height: 1em;}tbody tr td img {width: 2px;}tbody tr#em-rem td:nth-of-type(1) img {width: 1em;}tbody tr#em-rem td:nth-of-type(2) img {width: 1rem;}tbody tr#ex-rex td:nth-of-type(1) img {width: 1ex;}tbody tr#ex-rex td:nth-of-type(2) img {width: 1rex;}tbody tr#ch-rch td:nth-of-type(1) img {width: 1ch;}tbody tr#ch-rch td:nth-of-type(2) img {width: 1rch;}tbody tr#cap-rcap td:nth-of-type(1) img {width: 1cap;}tbody tr#cap-rcap td:nth-of-type(2) img {width: 1rcap;}tbody tr#ic-ric td:nth-of-type(1) img {width: 1ic}tbody tr#ic-ric td:nth-of-type(2) img {width: 1ric;}tbody tr#lh-rlh td:nth-of-type(1) img {width: 1lh;}tbody tr#lh-rlh td:nth-of-type(2) img {width: 1rlh;}</style></head><body id="www-meyerweb-com" class="css"><table><thead><tr><th>Tested</th><th>Element-relative</th><th>Root-relative</th></tr></thead><tbody><tr id="em-rem"><th>Computed `font-size`</th><td><img src="i/redbox.gif" alt=""></td><td><img src="i/redbox.gif" alt=""></td></tr><tr id="ex-rex"><th>Computed x-height</th><td><img src="i/redbox.gif" alt=""></td><td><img src="i/redbox.gif" alt=""></td></tr><tr id="ch-rch"><th>Width of the `0` character</th><td><img src="i/redbox.gif" alt=""></td><td><img src="i/redbox.gif" alt=""></td></tr><tr id="cap-rcap"><th>Height of a Roman capital letter</th><td><img src="i/redbox.gif" alt=""></td><td><img src="i/redbox.gif" alt=""></td></tr><tr id="ic-ric"><th>Width of the 水 ideograph</th><td><img src="i/redbox.gif" alt=""></td><td><img src="i/redbox.gif" alt=""></td></tr><tr id="lh-rlh"><th>Computed `line-height` </th><td><img src="i/redbox.gif" alt=""></td><td><img src="i/redbox.gif" alt=""></td></tr></tbody></table></body></html>