Is there a way to make text characters flush to the top of their bounding box in HTML5?
<p>Here is a Label element in HTML and the red dotted outline shows it's bounding box. Notice that the characters are <strong><em>not</em></strong> flush with the top edge of their bounding box: </p>

<pre><code>line-height:1.2; /* default */
</code></pre>

<p><a href="https://i.stack.imgur.com/TqC3z.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TqC3z.png" alt="enter image description here"></a><br>
Here is the JSFiddle showing the image above <a href="http://jsfiddle.net/6gLQU/16/" rel="nofollow noreferrer">http://jsfiddle.net/6gLQU/16/</a>.</p>

<p>Here is the same text where the <code>line-height</code> style is set to 1 or 100% (it is better but still not flush): </p>

<pre><code>line-height:1;
</code></pre>

<p><img src="https://i.stack.imgur.com/PTy4H.png" alt="enter image description here"></p>

<p>Finally, if I set the <code>line-height</code> style to .8 (80%), as in <a href="http://jsfiddle.net/6gLQU/15/" rel="nofollow noreferrer">this code example</a>, it is flush except for a small but acceptable single pixel difference in the last test text. This is great but if there is more than one line of text (multiline) then the next line is pulled up too high because that makes each line height 80% of it's actual height. </p>

<pre><code>line-height:.8;
</code></pre>

<p><a href="https://i.stack.imgur.com/VUEbm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VUEbm.png" alt="enter image description here"></a></p>

<p>Here is the JSFiddle code <a href="http://jsfiddle.net/6gLQU/16/" rel="nofollow noreferrer">http://jsfiddle.net/6gLQU/16/</a>.</p>

<hr>

<p><em>(You can skip this paragraph if you don't know Flash)</em> 
In Flash TLF (FTE or Flash Text Engine) if you add a text field, using FTE or TLF as it's engine, the text characters are aligned flush to the very top of the bounding rectangle. They look like the text in the last picture (the characters are snug up against the top border of the bounding box).  </p>

<hr>

<p>In HTML the text character is not aligned flush to the top of the bounding rectangle as shown in the examples above. When you increase the font size you also increase the gap from the top of the character to the top of the bounding box rectangle. </p>

<p>In my research in the text used in HTML and CSS the font style <code>line-height</code> will adjust the position of the characters of text inside their bounding box (as shown in the pictures above). In Flash the <code>line-height</code> style does not affect the characters in the first line of text but does adjust the following lines as well as in HTML (so it does not work in HTML or Flash for multiline). </p>

<p>I've determine that if I set line-height to .8 or 80% in HTML the font fits flush up against the top of the bounding box (as shown above). Great! That's what I want but it does not work for multiple lines of text. If there is more than one line, the next line is "pulled up" and overlaps the preceding line because, obviously, I'm giving each line only 80 percent of it's actual height. </p>

<hr>

<p><strong>Anyway, my question is:</strong>  </p>

<ol>
<li>Is there an alternative approach that I can use to make HTML characters flush to the top of the bounding box? The hack that I am using with <code>line-height</code> causes multiple lines of text to be too close together. </li>
<li>Is there a setting in Flash TLF to make it behave and appear like an HTML text line? That is, make it so it doesn't pull up the text characters to the top of the bounding box (match HTML layout rules).</li>
</ol>

<hr>

<p>I found an alternative that uses a negative margin space but I must manually enter it. It's not ideal because it's a different value for each font size (found by trial and error) and it moves the text box up, not the characters. With the <code>line-height</code> hack I can use <code>.8</code> and I know it will be positioned correct.  </p>

<p>Here is a <a href="http://jsfiddle.net/6gLQU/17/" rel="nofollow noreferrer">link to the code</a> and picture using negative margin. I only applied it to the last element. Notice the red border:</p>

<pre><code>font-size:64px;
line-height:1.2;
margin-top:-14px;
</code></pre>

<p><a href="https://i.stack.imgur.com/SxphI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SxphI.png" alt="enter image description here"></a></p>

<p>Here is <a href="http://jsfiddle.net/6gLQU/18/" rel="nofollow noreferrer">another test</a> and <a href="http://jsfiddle.net/6gLQU/19/" rel="nofollow noreferrer">another using multiples of 12</a> using negative margin percentage. Again, each negative margin value is different and found by trial and error: </p>

<pre><code>font-size:12px;
line-height:1.2;
margin-top:-.19%;
</code></pre>

<p><a href="https://i.stack.imgur.com/wsnN4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wsnN4.png" alt="enter image description here"></a></p>

<p>Here is information on the <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/text/engine/package-detail.html" rel="nofollow noreferrer">FTE engine</a>. I read it for an hour and I realize now I know a few of those words. </p>

<p>PS Sorry this question is so long. I'm trying to win the longest post award, apparently. Also, I added <em>two</em> questions because there is the actual problem and then there is the workaround question that might not be necessary if the actual problem is solvable. I'm not sure what this is called but someone told me it's a common thing with programming questions on SO. Also, adding the Firefox tag since it's running in Firefox and one of the Firefox developers might see it and know how this all works. </p>

<p><strong>Update 2019:</strong><br>
I have another question posted about this somewhere but the accepted fix works for specific fonts but not every font. </p>

<p>IIUC The top edge of the text character, called a glyph, is called the caps height and the height of the container around the glyph is the em height. The  caps heights are different for each font since fonts are different styles and created by different authors. </p>

<p>IIUC Browsers don't position according to em or font size and caps height is not considered. </p>

<p>A <em>feature request</em> I have for browsers would be to support aligning the first line of a text of a paragraph or label at the caps height so the text is flush to the top edge. That might be a negative text margin. This would make browsers accurately reproduce what many design tools support. </p>

<pre><code>// something like any of these: 
align-caps-height: true;  
first-line-position: caps-height;
margin-top: caps-height;
</code></pre>