1258991 - The inline-block's width should be the sum of the width of his ::first-letter and the width of the rest of his content.

Status: RESOLVED DUPLICATE of bug 385615

(Core :: Layout: Text and Fonts, defect)

Description

[jpierreq]

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:38.0) Gecko/20100101 Firefox/38.0 Iceweasel/38.7.1
Build ID: 20160318181316

Steps to reproduce:

html : 
<p>A<span id="sp1">BCD</span>E<br />A<span id="sp2">BCD</span>E</p>
css :
span { display: inline-block; backgroud-color: yellow; }
#sp1::first-letter, #sp2 { font-size: 2em; } /* we could instead change the font-family... */


Actual results:

In #sp1, as expected, only the first letter is displayed bigger, but the width of #sp2 is computed as if all the content of #sp1 were bigger.
#sp1 and sp2 have the same width.

If we just modify the font-size value to .7em, glyphs will overlap.



Expected results:

ABCDE should have been displayed without any white space, neither overlapping letter.

Comment 1

[Loic]

Testcase: http://codepen.io/anon/pen/grWWpX

Comment 2

[marco.pasqualetti]

This issue is occurring also using floated elements: https://jsfiddle.net/apd7u1tk/

I have reproduced the issue on:
- Firefox 54.0.1 - Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:54.0) Gecko/20100101 Firefox/54.0
- Firefox 53.0.3 - Mozilla/5.0 (Macintosh; Intel Mac OS X 10.11; rv:53.0) Gecko/20100101 Firefox/53.0
- Firefox 39.0.3 - Mozilla/5.0 (Macintosh; Intel Mac OS X 10.11; rv:39.0) Gecko/20100101 Firefox/39.0