Open Bug 1426073 Opened 2 years ago Updated Last year

Implement "stroke-align:outset" - single and multiple outside strokes for text

Categories

(Core :: Layout: Text and Fonts, enhancement, P5)

enhancement

Tracking

()

UNCONFIRMED

People

(Reporter: tobi, Unassigned)

References

Details

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.108 Safari/537.36

Steps to reproduce:

We need outside strokes for text, because the current centered strokes are not pretty - the intrude the font fill.

An image illustrating how centered strokes aren't pretty / don't do what typically is intended (leaving the fill of the font unaffected): 
https://twitter.com/TobiReif/status/942805851017969664

I hope you will implement stroke-align:outset.
Component: Untriaged → Layout: Text
Product: Firefox → Core
Is this property defined in any standard and/or implemented in any other browser? Offhand, it sounds like it could be tricky... as mentioned in the twitter thread, what does "inset" even mean for a figure-of-8 path?

A simpler solution might be a paint-order property that allows you to ensure the stroke is painted below the fill. This exists already, but AFAIK it may only be applicable to SVG at present(?).
Yes it is being specified:
https://www.w3.org/TR/fill-stroke-3/#propdef-stroke-align

> what does "inset" even mean for a figure-of-8 path?

I need outset, not inset.

For any font that Firefox can render, Firefox should be able to add an outset stroke, because it can render each glyph (no matter what kind of path) and because it can render text stroke (currently only centered), it could eg (as a basic concept) cut out (or overlap) the inside portion of the (double-width) centered stroke(s), as in this workaround: https://www.petercarrero.com/examples/stroke/ .

> A simpler solution might be a paint-order property that allows you to ensure the stroke is painted below the fill.

That's what FF could do for stroke-align:outset - ensure the (double-width) stroke is painted below the fill.

I need that for HTML (and for SVG) text.
Sorry, I meant to refer to outset rather than inset.

I see there's a draft spec, but also note that it has major issues that still need to be addressed; e.g. see https://www.w3.org/TR/fill-stroke-3/#issue-a6357402.

Note also https://caniuse.com/#search=stroke-align, which suggests this isn't currently implemented anywhere. (Have you filed similar bugs against the other browsers?)
See Also: → 1426146
(Bugzilla doesn't accept the full comment, trying again:)

From the section you linked:

"Text is easy, as are simple closed, non-self-intersecting paths, but the other categories exist and need good definitions."

My request is: (the title of this ticket):

[Please] implement "stroke-align:outset" - single and multiple outside strokes for text[that's the scope of this ticket]

At first, having the "outset" option for nothing but text (HTML and ideally also SVG) would be sufficient form my point of view. It would be a great start regarding implementation of that feature, as most people who need this option do need it for text (I'm pretty sure).

Supporting "outset" for SVG paths etc can then get considered later.

Having "outset" for text strokes is overdue by many many years - it should've been the default all along. Designers/developers almost never want (or expect) the stroke(s) to intrude the glyphs / to take away from the fill of the glyphs.

> this isn't currently implemented anywhere.

Firefox could get the fame of being the first!

> Have you filed similar bugs against the other browsers?

Sure :) https://twitter.com/TobiReif/status/943048228051869696

I (and many others) need this feature. eg:

Chris Coyer (of Codepen and css-tricks.com) in 2010 (seven years ago):
https://css-tricks.com/adding-stroke-to-web-text/
"Only outside text stroke alignment looks any good at all to me. It's unfortunate, both for CSS and for Illustrator, that the unchangeable default is centered."

https://stackoverflow.com/questions/26634201/add-stroke-around-text-on-the-outside-with-css
"Add stroke around text - on the outside - with css?"
"The -webkit-text-stroke doesn't support placing the stroke on the outside of the text"

https://stackoverflow.com/questions/17484262/css-webkit-text-stroke-but-stroke-covers-font-color
"Why [is] the webkit-text-stroke [...] covering [...] the font color?"

https://css-tricks.com/text-stroke-stuck-middle/
"When you set a stroke straddled over the designed edge of a character, you're losing the integrity of the shape."
"And that's the trouble with text-stroke in CSS: you have no choice. It's center-aligned stroke only."

Also, bad workarounds exist.

We need a solution.
(Please delete the two truncated comments with redundant content.) (comments #4 and#5)
Regarding the referenced "see also" bug ticket
https://bugzilla.mozilla.org/show_bug.cgi?id=1426146
"support the paint-order property for non-SVG text as well as SVG":

I hope that Firefox will implement stroke-align:outset (for HTML and SVG).

And you sure could also implement paint-order for HTML and SVG :)

But stroke-align:outset should get implemented in any case:

This "5px ... stroke-align: outset" expresses intent much more direct than "10px ... paint-order: stroke" (when you want a 5px outset stroke), and is thus much easier to understand, remember, use, read, and to maintain.

When the CSS user wants an outset outline with 5px width, the paint order should not be something to care about. If "5px ... stroke-align: outset" gets implemented (for opaque colors) by effectively doing (the same stuff as for) "10px ... paint-order: stroke" internally (in Firefox), then that'd be fine with me :)
BTW, supporting "stroke-align:outset" only for non-transparent colors (at first) would be fine with me.
(In reply to Tobi Reif from comment #9)
> BTW, supporting "stroke-align:outset" only for non-transparent colors (at
> first) would be fine with me.

I'd be a bit reluctant to ship the feature in that form; if we have "stroke-align:outset" at all, authors should be able to rely on it working regardless of the colors that happen to be in use.

Hence my inclination to consider paint-order as a solution that we could potentially implement and ship pretty quickly, if there's agreement that it is a good thing for the platform to have. I realize using this to express the use case you're after is less direct, but it would be equivalent in functionality to the partially-implemented stroke-align option, and would maintain better consistency within the platform.

Adding stroke-align:outset (and inset) would also be great, but doing it "right" is significantly trickier.
I (and potentially many others) need one, two, or sometimes even more outset outlines/strokes (see bug title).

As an example, here's a (currently work in progress) page where I use two strokes:

https://tobireif.com/demos/grid/
(View in eg Chrome.)
(Firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1426092 .)

Does the paint-order option support multiple (eg three) strokes?

All I could find is this:

https://www.w3.org/TR/SVG2/painting.html :
"SVG 2 Addition": "Allow multiple paints in fill and stroke."
"We will allow multiple paints in the fill and stroke properties in SVG 2."
"This was dropped for SVG 2, but will be added later in sync with CSS Fill and Stroke Level 3"
ISTM that supporting multiple strokes (without duplicating the actual text element) is a distinct issue from either stroke inset/outset or paint-order, and would be best filed as a separate bug.
This ticket here is exactly for what I (and potentially many others) need:

From the title: single and multiple outside strokes for text.

... for HTML and perhaps also for SVG.

This ticket here is not regarding options that do not support multiple outside strokes for text.

> and would be best filed as a separate bug

Anything that does not cover the scope of this ticket here (or is outside the scope of this ticket) can be filed as a separate ticket, by anyone, at any time.

I hope that Firefox will implement "stroke-align:outset" - single and multiple outside strokes for HTML text (and perhaps also for SVG text).

This
https://www.w3.org/TR/fill-stroke-3/#propdef-stroke-align
would fulfil the criteria it seems:

Outside strokes:
https://www.w3.org/TR/fill-stroke-3/#propdef-stroke-align
"center | inset | outset"

Multiple strokes:
https://www.w3.org/TR/fill-stroke-3/#stroke-layering
"The stroke of a box can have multiple layers. The number of layers is determined by the larger of the number of comma-separated values for the stroke-image property and the number of comma-separated values for the stroke-color property."

HTML and SVG:
https://www.w3.org/TR/fill-stroke-3/
"This module contains the features of CSS relating to filling and stroking [HTML and SVG?]text and SVG shapes."

Please leave the title unchanged, and please leave this feature request ticket open. Thanks.
Just to note, we now have paint-order support (bug 1426146), which can be used for simple cases.

For more complex features, the draft CSS Fill and Stroke spec still has a lot of open issues to be resolved.
Priority: -- → P5
It's really great that you implemented paint-order!

That gives web developers the feature of single outset strokes.

I hope that Firefox will, at some point, also support multiple outset strokes. Perhaps Mozilla could contribute to the specs so that they become implementable regarding this feature.
You need to log in before you can comment on or make changes to this bug.