Underline decoration in Chrome 37
Something bad with DirectWrite support in Chrome 37 (37.0.2062.103) — underline's position are too high.
Affected most of web safe fonts with various `font-size`.
HTML
<p class="fft fz10 mt0"></p>
<p class="fft fz11"></p>
<p class="fft fz12"></p>
<p class="fft fz13 mb2"></p>
<p class="ffv fz10"></p>
<p class="ffv fz11"></p>
<p class="ffv fz12"></p>
<p class="ffv fz13 mb2"></p>
<p class="ffg fz10"></p>
<p class="ffg fz11"></p>
<p class="ffg fz12"></p>
<p class="ffg fz13 mb2"></p>
<p class="fftn fz10"></p>
<p class="fftn fz11"></p>
<p class="fftn fz12"></p>
<p class="fftn fz13 mb2"></p>
<p class="ffc fz10 brbe"></p>
<p class="ffc fz11"></p>
<p class="ffc fz12"></p>
<p class="ffc fz13"></p>
<p class="ffc fz14"></p>
<p class="ffc fz15"></p>
<p class="ffc fz16"></p>
<p class="ffc fz17 mb2"></p>
<p class="ffs fz10"></p>
<p class="ffs fz11"></p>
<p class="ffs fz12 mb2"></p>
<p class="ffa fz10"></p>
<p class="ffa fz11"></p>
<p class="ffa fz12"></p>
<p class="ffa fz13"></p>
CSS
body {
-webkit-columns: 2;
columns: 2;
text-decoration: underline;
}
.fft { font-family: tahoma; } .fft:before { content: 'Tahoma'; }
.ffv { font-family: verdana; } .ffv:before { content: 'Verdana'; }
.ffg { font-family: georgia; } .ffg:before { content: 'Georgia'; }
.fftn { font-family: times new roman; } .fftn:before { content: 'Times New Roman'; }
.ffc { font-family: cambria; } .ffc:before { content: 'Cambria'; }
.ffs { font-family: segoe ui; } .ffs:before { content: 'Segoe ui'; }
.ffa { font-family: arial; } .ffa:before { content: 'Arial'; }
.fz10 { font-size: 10px; } .fz10:after { content: ', 10px' }
.fz11 { font-size: 11px; } .fz11:after { content: ', 11px' }
.fz12 { font-size: 12px; } .fz12:after { content: ', 12px' }
.fz13 { font-size: 13px; } .fz13:after { content: ', 13px' }
.fz14 { font-size: 14px; } .fz14:after { content: ', 14px' }
.fz15 { font-size: 15px; } .fz15:after { content: ', 15px' }
.fz16 { font-size: 16px; } .fz16:after { content: ', 16px' }
.fz17 { font-size: 17px; } .fz17:after { content: ', 17px' }
.mt0 { margin-top: 0; }
.mb2 { margin-bottom: 2rem; }
.brbew { -webkit-column-break-before: always; }
JavaScript
/*
Something bad with DirectWrite support in Chrome 37 (37.0.2062.103) — underline's position are too high.
Affected most of web safe fonts with various `font-size`.
*/