@@ -1912,68 +1912,69 @@ Text Shadows: the 'text-shadow' property
1912
1912
1913
1913
1914
1914
Name : text-shadow
1915
- Value : none | [ <>? && <>{2,4} ] #
1915
+ Value : none | <> #
1916
1916
Initial : none
1917
1917
Applies to : text
1918
1918
Inherited : yes
1919
1919
Computed value : either the keyword ''box-shadow/none'' or
1920
1920
a list, each item consisting of four absolute lengths
1921
1921
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
1923
1924
1924
1925
1925
1926
This property accepts a comma-separated list of shadow effects
1926
1927
to be applied to the text of the element.
1927
1928
Values are interpreted as for 'box-shadow' [[!CSS-BACKGROUNDS-3]] .
1928
- (But note that the ''box-shadow/inset'' keyword are not allowed.)
1929
1929
Each layer shadows the element's text and all its text decorations
1930
1930
(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
-
1935
1931
The shadow effects are applied front-to-back:
1936
1932
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)
1941
1961
and the elements text and text decoration.
1962
+ [=Inner text shadows=] must be painted
1963
+ over the text and its decorations.
1942
1964
UAs should avoid painting text shadows over text
1943
1965
in adjacent elements belonging to the same stack level and stacking context.
1944
1966
(This may mean that the exact stack level of the shadows depends
1945
1967
on whether the element has a border or background:
1946
1968
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.
1950
1969
1951
- Unlike 'box-shadow' , text shadows are not clipped to the shadowed shape
1952
- and may show through if the text is partially-transparent.
1953
1970
Like 'box-shadow' , text shadows do not influence layout,
1954
1971
and do not trigger scrolling
1955
1972
or increase the size of the
scrollable overflow region .
1956
1973
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
-
1967
1974
The ''text-shadow'' property applies to both the
1968
1975
::first-line and
::first-letter
1969
1976
pseudo-elements.
1970
1977
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
-
1977
1978
1978
1979
Painting Text Decorations
1979
1980
@@ -2089,41 +2090,34 @@ Appendix B: Default UA Stylesheet
2089
2090
Appendix C:
2090
2091
Changes
2091
2092
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
+
2113
2107
2114
2108
2115
2109
Additions Since Level 3
2116
2110
2117
- The following features have been added since
Level 3 :
2111
+ The following features have been added since
Level 3 :
2118
2112
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
+
2127
2121
2128
2122
2129
2123
Privacy and Security Considerations {#priv-sec}
0 commit comments