Skip to content

Commit 13442dd

Browse files
committed
[css-text-decor-4] Add 'inset' and disallow negative spread radius for 'text-shadow'. #6074 #6971
1 parent 127c076 commit 13442dd

File tree

1 file changed

+56
-62
lines changed

1 file changed

+56
-62
lines changed

css-text-decor-4/Overview.bs

Lines changed: 56 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1912,68 +1912,69 @@ Text Shadows: the 'text-shadow' property
19121912

19131913
19141914
Name: text-shadow
1915-
Value: none | [ <>? && <>{2,4} ]#
1915+
Value: none | <>#
19161916
Initial: none
19171917
Applies to: text
19181918
Inherited: yes
19191919
Computed value: either the keyword ''box-shadow/none'' or
19201920
a list, each item consisting of four absolute lengths
19211921
plus a computed color
1922-
Animation type: as [=shadow list=]
1922+
and optionally also an ''text-shadow/inset'' keyword
1923+
Animation type: as shadow list
19231924
19241925

19251926
This property accepts a comma-separated list of shadow effects
19261927
to be applied to the text of the element.
19271928
Values are interpreted as for 'box-shadow' [[!CSS-BACKGROUNDS-3]].
1928-
(But note that the ''box-shadow/inset'' keyword are not allowed.)
19291929
Each layer shadows the element's text and all its text decorations
19301930
(composited together).
1931-
If the color of the shadow is not specified,
1932-
it defaults to ''currentColor'',
1933-
i.e. the shadow’s color is taken from the element’s 'color' property.
1934-
19351931
The shadow effects are applied front-to-back:
19361932
the first shadow is on top.
1937-
The shadows may thus overlay each other,
1938-
but they never overlay the text itself.
1939-
The shadow must be painted at a stack level
1940-
between the element's border and/or background (if present)
1933+
The shadows may thus overlay each other.
1934+
1935+
Unlike 'box-shadow',
1936+
1937+
is strictly interpreted as outset distance
1938+
from any point of the glyph outline,
1939+
and therefore, similar to the blur radius,
1940+
creates rounded, rather than sharp, corners.
1941+
Negative spread values are invalid.
1942+
1943+
Outer text shadows
1944+
(specified without the ''box-shadow/inset'' keyword)
1945+
shadow the text--
1946+
including any text stroke [[!FILL-STROKE-3]]--
1947+
as if it were cut and raised above the surrounding canvas.
1948+
Unlike 'box-shadow',
1949+
outer text shadows are not clipped to the shadowed shape
1950+
and may show through if the text is partially-transparent.
1951+
1952+
Inner text shadows
1953+
(specified with the ''box-shadow/inset'' keyword)
1954+
shadow the canvas--
1955+
and any text stroke [[!FILL-STROKE-3]]--
1956+
as if the text were cut and dropped below the surrounding canvas.
1957+
They are therefore only drawn within the inner edge of the stroke.
1958+
1959+
[=Outer text shadows=] must be painted at a stack level
1960+
between the element's border/background (if present)
19411961
and the elements text and text decoration.
1962+
[=Inner text shadows=] must be painted
1963+
over the text and its decorations.
19421964
UAs should avoid painting text shadows over text
19431965
in adjacent elements belonging to the same stack level and stacking context.
19441966
(This may mean that the exact stack level of the shadows depends
19451967
on whether the element has a border or background:
19461968
the exact stacking behavior of text shadows is thus UA-defined.)
1947-
It is undefined whether a given shadow layer shadows
1948-
each glyph or decoration independently
1949-
or if the text and/or decorations are flattened and then shadowed.
19501969

1951-
Unlike 'box-shadow', text shadows are not clipped to the shadowed shape
1952-
and may show through if the text is partially-transparent.
19531970
Like 'box-shadow', text shadows do not influence layout,
19541971
and do not trigger scrolling
19551972
or increase the size of the scrollable overflow region.
19561973

1957-
Also unlike 'box-shadow',
1958-
the [=spread distance=] is strictly interpreted as outset distance
1959-
from any point of the glyph outline,
1960-
and therefore, similar to the blur radius,
1961-
creates rounded, rather than sharp, corners.
1962-
1963-
Note: The painting order of shadows defined here is the opposite
1964-
of that defined in the 1998
1965-
1966-
19671974
The ''text-shadow'' property applies to both the
19681975
::first-line and ::first-letter
19691976
pseudo-elements.
19701977

1971-
Level 4 adds a spread radius argument to 'text-shadow',
1972-
using the same syntax and interpretation as for 'box-shadow',
1973-
except that corners are always rounded
1974-
(since the geometry of a glyph is not so simple as a box).
1975-
1976-
19771978

19781979
Painting Text Decorations
19791980

@@ -2089,41 +2090,34 @@ Appendix B: Default UA Stylesheet
20892090

Appendix C:

20902091
Changes
20912092

2092-

2093-
Changes since the 13 March 2018 Working Draft
2094-
2095-
    2096-
  • Merged in entire contents of CSS Text Decoration Level 3,
  • 2097-
    so that this is no longer a diff spec.
    2098-
  • Split 'text-decoration-skip' into longhands.
  • 2099-
    2100-
  • Added ''text-decoration-skip-ink/all'' value to 'text-decoration-skip-ink'.
  • 2101-
  • Renamed text-decoration-width to 'text-decoration-thickness'.
  • 2102-
  • Added <> values to 'text-decoration-thickness' and 'text-underline-offset'.
  • 2103-
    2104-
  • Defined 'text-underline-offset' position values as outsets rather than insets,
  • 2105-
    because this was more intuitive to users.
    2106-
  • Moved ''text-underline-position/from-font'' keyword from 'text-underline-offset' to 'text-underline-position'.
  • 2107-
    2108-
  • Adjust ''text-emphasis-skip: punctuation'' to include all of Po category, with some exceptions.
  • 2109-
    2110-
  • Clarified that line-throughs are always continuous.
  • 2111-
  • Miscellaneous clarifications and editorial tweaks.
  • 2112-
    2093+

    2094+
    Changes since the 6 May 2020 Working Draft
    2095+
    2096+
    2097+
    Significant changes since the
    2098+
    2099+
    2100+
      2101+
    • Added spread distance and ''box-shadow/inset'' to 'text-shadow'.
    • 2102+
      2103+
      2104+
    • Explicitly noted properties applying to text in “Applies to” line.
    • 2105+
      2106+
      21132107

      21142108

      21152109
      Additions Since Level 3
      21162110

      2117-
      The following features have been added since Level 3:
      2111+
      The following features have been added since Level 3:
      21182112

      2119-
        2120-
      • Added ''spelling-error'' and ''grammar-error'' values to 'text-decoration-line'.
      • 2121-
      • Added 'text-decoration-thickness' and 'text-underline-offset' properties.
      • 2122-
      • Added ''text-underline-position/from-font'' value to 'text-underline-position'.
      • 2123-
      • Drafted 'text-decoration-skip' property and its longhands.
      • 2124-
      • Drafted 'text-emphasis-skip' property.
      • 2125-
      • Added [=spread distance=] value to 'text-shadow'.
      • 2126-
        2113+
          2114+
        • Added ''spelling-error'' and ''grammar-error'' values to 'text-decoration-line'.
        • 2115+
        • Added 'text-decoration-thickness' and 'text-underline-offset' properties.
        • 2116+
        • Added ''text-underline-position/from-font'' value to 'text-underline-position'.
        • 2117+
        • Drafted 'text-decoration-skip' property and its longhands.
        • 2118+
        • Drafted 'text-emphasis-skip' property.
        • 2119+
        • Added spread distance and ''box-shadow/inset'' to 'text-shadow'.
        • 2120+
          21272121

          21282122

          21292123
          Privacy and Security Considerations {#priv-sec}

          0 commit comments

          Comments
           (0)