We are working on a large print app with thousands of fonts. Historically, these have been displayed using Flash but, obviously, we are now investigating HTML5.
A subset of WOFF fonts display vertically displaced downwards by up to several pixels - this appears to be converter independent. (I have tried over a dozen WOFF conversions and all display the same positioning.)
Clearly there is something in the affected fonts that causes WOFF to display vertically down from the OTF / TTF / SWF position. Can anybody point me to a reference that might explain what?
Thanks, G
ETA: Following comments below, I have edited this to include an MCVE.
The example chosen demonstrates how the ClarendonNo1URW-Lig font displays a small number of pixels below where would be expected using the same font outside of a browser.
The blue rectangles in the screenshot linked illustrate the bounds that are expected when interrogating the font to position between baseline of last line and ascent of first line - to match InDesign display positioning.
All positioning values are calculated explicitly from these font ascent / descent values and have been validated against over 1000 fonts - they are pixel perfect in well over 90% of fonts, but some (such as the example) are shifted vertically downwards.
Additionally, this phenomena appears consistent across a range of browsers - similar behaviour is observed in FireFox, Edge, Opera, Chrome...
This doesn't appear to be converter dependent - I have tried almost a dozen converters from the online ttf to woff services to purchased software including TransType etc. Swapping the WOFF with the original TTF or OTF (as applicable) does not eliminate the issue, so it is probably something in the original font file itself that is hinting to the browser to display lower down. But I have no idea what or how to query it to make allowance for same.
Sample HTML page displaying issue is below. The use of lineheight 0 and absolute positioning of spans is to eliminate the effects of browser-renderer specific rounding effects that otherwise make a mockery of any attempt for pixel-perfect font layout.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
@font-face {
font-family: 'ClarendonNo1URW-Lig';
src: url('/assets/compiled_fonts/ClarendonNo1URW_Lig.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
img {
width:3000px;
transform-origin:0 0;
}
p {
width:3000px;
background-color:#00AEEF;
margin:0;
position:relative;
}
span {
line-height:0px;
color: #000000;
position: absolute;
}
</style>
</head>
<body>
<h1>As displayed by HTML</h1>
<div id="paraToStyle" style="text-align:left; ">
<p style="height: 226.8px;" id="bobParent">
<span id="bobToStyle" style="font-family: ClarendonNo1URW-Lig; font-size: 72px; top: 36px;">Net netted nets nest nests stents N e t n s l y L</span>
<br>
<span id="bobToStyle2" style="font-family: ClarendonNo1URW-Lig; font-size: 72px; top: 122.4px;">hairdressing Sillily Lloyds of Lyana LYANG</span>
<br>
<span id="bobToStyle3" style="font-family: ClarendonNo1URW-Lig; font-size: 72px; top: 208.8px;">Better BETTER fet Fetter Gest Fest</span>
</p>
</div>
<br>
<h1>As exported from InDesign</h1>
<img style="transform: scale(1, 1);" src="/fontImages/ClarendonNo1URW_Lig.png" id="paraImageFromInDesign">
</body>
@font-face, and again with the same font but run through "professional" WOFF conversion tools (google's woff converter, FontForge, etc). If you can't distribute the font, say which one you used (because people might own it), show the code you used (html + css), screenshoot and show the result for several different browsers, say which tools you used for the conversion, and then you have a question with a good amount of information and detail. – Mike 'Pomax' Kamermans