W3C home > Mailing lists > Public > public-css-archive@w3.org > July 2018

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

From: Meteor0id via GitHub <sysbot+gh@w3.org>
Date: Fri, 27 Jul 2018 21:51:01 +0000
To: public-css-archive@w3.org
Message-ID: <issues.opened-345376603-1532728260-sysbot+gh@w3.org>
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 ==
https://www.w3.org/TR/css-pseudo-4/#selectordef-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">
  <p>
    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.
  </p>
  <p>
    Another paragraph for the sake of making sure nothing odd is happeing when someone changes the selector.
  </p>
</section>
```


```
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

This archive was generated by hypermail 2.3.1 : Friday, 27 July 2018 21:51:07 UTC