[csswg-drafts] [css-pseudo-4] property line-height should apply to ::first-letter

Meteor0id has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-pseudo-4] property line-height should apply to ::first-letter ==

If I read the spec correctly, It sias that all font-properties should aplly to this pseudo element, and I belive line-height is among them. For some readon in this example I have to multiply the font-size and add some padding to get a properly sized and aligned first letter.

<section class="article_introduction">
    Lorum Ipsum I dont know the rest out of my head and typing this is faster than looking it up and copying it over. Don't judge.
    Another paragraph for the sake of making sure nothing odd is happeing when someone changes the selector.

section {
max-width: 200px;
p {
  line-height: 1.6em;

.article_introduction p:first-of-type::first-letter {
  /* We are doing much more here than could be achieved by the upcoming property initial-letter. For example: we are also changing the font-family and applying a linear-gradient color. Therefore using ::first-letter will still be the way to go when initial-letter becomes a widely supported property in the nearby future. */  
  /* Setting the font-size, line height and padding is not clear to me */
 font-size: 3.2em !important; /* 2em * 1.6 line-height =  3.2em */
 padding: .2em 0 0 0; /*not sure why that .2em is needed*/
  /* line height seems to have no effect on this floating pseudo element */
  float: left;
 font-weight: normal;
 background: linear-gradient(to top left, #1a23e8, #10c0d0); /*#465298;*/ /*#00C8FF;*/
 -webkit-background-clip: text;
 background-clip: text;
 color: transparent; /* because we want the color of the background to be visible!*/

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2959 using your GitHub account

Received on Friday, 27 July 2018 21:51:06 UTC