1

Below is the snippet (JsFiddle)

div::first-line {
    font-size: 1.5em;
}

div::first-letter {
    font-size: 4em;
}
<div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</div>

As can be seen, the first letter of the text is so large that it overlaps with the second line. enter image description here Somehow the line box of the first line doesn't enlarge with its largest element, which is the first letter.

Moreover, these characters are not aligned by the baseline..

Does anyone have any ideas about this? Thanks!

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Hanfei Sun
  • 45,281
  • 39
  • 129
  • 237
  • 1
    Seems perfect from here with Chrome, Edge, IE11, and Firefox. – Abhitalks Nov 05 '15 at 07:12
  • @Abhitalks not so perfect on Mac OS X Chrome 46.0 (screenshot added) – Hanfei Sun Nov 05 '15 at 07:18
  • Ahhh ok. I could just replicate this issue my Win-10 + Chrome-46 in the dev-tools. If I remove the `first-line` style and then re-add it, the issue appears. Does it help, if the order of rules are inter-changed? i.e. `first-letter` followed by `first-line`. – Abhitalks Nov 05 '15 at 07:21
  • 1
    Chrome has shown repaint bugs time and again. See this - http://stackoverflow.com/questions/28911052/odd-behavior-of-first-letter-in-chrome – Abhitalks Nov 05 '15 at 07:24
  • @Abhitalks still the same result after changing the order. I believe this may be a bug of Chrome. – Hanfei Sun Nov 05 '15 at 07:25
  • 2
    @Abhitalks: I really need to start keeping track of what's broken with each new Chrome release. What a joke. IE used to have the same problems, but at least its major releases were *years* apart. In fairness, though, `::first-letter` is incredibly buggy on *every* browser. – BoltClock Nov 05 '15 at 07:25
  • @BoltClock: As I check, Edge and IE11 don't exhibit this behaviour. – Abhitalks Nov 05 '15 at 07:30
  • @Abhitalks: Not in this particular area, maybe, but I wouldn't be surprised if they had a different set of quirks involving `::first-letter`. – BoltClock Nov 05 '15 at 07:31
  • 1
    Probably a stupid question, but: how much of a problem is this really? Does the average visitor to a website randomly switch off and back on properties? As long as I don't, I can't see the issue appearing. Oh wait, it also happens when I zoom out and in. Hrm. – Mr Lister Nov 05 '15 at 08:29

0 Answers0