Intent to implement: CSS initial-letter property

[Jeremy Chen]

Summary: Initial-letters have been widely used in typographic printing for
long. However, it is not handy to put initial-letters on web pages. Web
developers/designers have suffered from doing massive math calculations
while laying out a initial-letter through :first-letter pseudo element, and
afterward, they may still bump into cross-browser issues. I'd like to
implement this property to ease web authors' pain. Also, I believe this
property should not be absence from the modern layout.

Bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1223880

Spec.: https://drafts.csswg.org/css-inline/#initial-letter-styling

Platform coverage: All platforms

Preference behind which this will be implemented:
layout.css.initial-letter.enabled

DevTools bug: None needed, I think.

Support in other browsers: So far, Safari is the only browser which
supports this with -webkit- prefixed. I can't find a bug on both Chrome and
Edge, so I assume there's no sign from them at the moment.


-Jeremy Chen

[Patrick Brosset]

On Thu, Sep 29, 2016 at 8:04 AM, Jeremy Chen <jerem...@mozilla.com> wrote:

> DevTools bug: None needed, I think.
>

I think there are 2 things DevTools could do to help authors
use/discover/understand this feature:

1. initial-letter only applies to ::first-letter pseudos or inline-level
first child of a block container.
To me, this means that some people may find themselves trying the new
initial-letter property and not seeing it work, just because they're not
using it in the right CSS rule.
So, similar to how we display invalid properties in DevTools today (try
adding foo:bar; in the inspector for instance, you'll see a warning sign),
we should also display "useless" properties.
For instance initial-letter:2; inside a div { display:block; } rule should
have no effect, right?
In that case it'd be nice to also have a warning sign next to the property
telling authors the reason why the property did not apply.
I think we have this captured on bugzilla already:
https://bugzilla.mozilla.org/show_bug.cgi?id=1303833 and
https://bugzilla.mozilla.org/show_bug.cgi?id=1306054

2. This property is related to the concept of baselines in CSS. And I think
it would be a huge help for authors using this property and other text
alignment and sizing properties if DevTools could simply display baselines
in the page, overlaid on an element.
I'd be very interested to talk about this more with someone working on
Gecko who would know how this could be done, and I've just filed this bug:
https://bugzilla.mozilla.org/show_bug.cgi?id=1306240

Patrick

[Jeremy Chen]

2016-09-29 17:10 GMT+08:00 Patrick Brosset <pbro...@mozilla.com>:

> On Thu, Sep 29, 2016 at 8:04 AM, Jeremy Chen <jerem...@mozilla.com>
> wrote:
>
>> DevTools bug: None needed, I think.
>>
>
> I think there are 2 things DevTools could do to help authors
> use/discover/understand this feature:
>
> 1. initial-letter only applies to ::first-letter pseudos or inline-level
> first child of a block container.
> To me, this means that some people may find themselves trying the new
> initial-letter property and not seeing it work, just because they're not
> using it in the right CSS rule.
> So, similar to how we display invalid properties in DevTools today (try
> adding foo:bar; in the inspector for instance, you'll see a warning sign),
> we should also display "useless" properties.
> For instance initial-letter:2; inside a div { display:block; } rule should
> have no effect, right?
>
In that case it'd be nice to also have a warning sign next to the property
> telling authors the reason why the property did not apply.
> I think we have this captured on bugzilla already:
> https://bugzilla.mozilla.org/show_bug.cgi?id=1303833 and
> https://bugzilla.mozilla.org/show_bug.cgi?id=1306054
>

Yes, thank you for filing/mentioning these two bugs. I agree providing
reasons why a property is "useless" would be helpful for authors.

> 2. This property is related to the concept of baselines in CSS. And I
> think it would be a huge help for authors using this property and other
> text alignment and sizing properties if DevTools could simply display
> baselines in the page, overlaid on an element.
> I'd be very interested to talk about this more with someone working on
> Gecko who would know how this could be done, and I've just filed this bug:
> https://bugzilla.mozilla.org/show_bug.cgi?id=1306240
>

Great idea, I think this would help web authors a lot while doing text
alignment designs.


-Jeremy Chen

[Xidorn Quan]

On Thu, Sep 29, 2016, at 04:04 PM, Jeremy Chen wrote:
> Summary: Initial-letters have been widely used in typographic printing
> for
> long. However, it is not handy to put initial-letters on web pages. Web
> developers/designers have suffered from doing massive math calculations
> while laying out a initial-letter through :first-letter pseudo element,
> and
> afterward, they may still bump into cross-browser issues. I'd like to
> implement this property to ease web authors' pain. Also, I believe this
> property should not be absence from the modern layout.

IIRC, your plan is to only implement "initial-letter" for :first-letter
pseudo element for now, and try to ship that without having the property
available for inline-level first child of a block. Is that right? If
yes, you should probably mention that in your "intend to ship" when you
finish the implementation.

- Xidorn

[Jeremy Chen]

Xidorn, yes, you're right.
The implementation plan is to only implement initial-letter property for
:first-letter, just like what Safari did at present.
As to shipping criteria, like David said in [1], it depends whether
supporting inlines as well is a lot of extra work.
I do plan to mention the shipping detail in another "intent to ship" when I
finish most of the implementation.
I guess it would be no harm to mention the plan in this thread as well.
Thank you for the pointers. :-)

[1] https://bugzilla.mozilla.org/show_bug.cgi?id=1223880#c25