Text styling
paint-order
paint-order sets the order in which the fill, the stroke, and the markers of text or an SVG shape are painted. Moving a -webkit-text-stroke outline under the fill outlines text on the outside without making the letters thinner.
Syntax
normal | [ fill || stroke || markers ]Preview
Code
.box {
-webkit-text-stroke: 0.12em #eaac3a;
paint-order: stroke;
}Controls
Painting order: stroke → fill → markers
About
Writing the value
normal: the initial value. The fill is painted first, then the stroke, then the markers, and whatever is painted later lies on top.- List
fill,stroke, andmarkers, separated by spaces, in the order to paint them. Anything left out is painted afterwards in the initial order, sostrokeis the same asstroke fill markers. Each can appear only once.
When to use it
Combine it with -webkit-text-stroke as paint-order: stroke to outline a heading so it stays readable over a photo or a pattern. The stroke is centered on the outline of the letters, so with the initial value its inner half covers the fill and the letters get thinner. Painting the stroke first hides its inner half under the fill and leaves only the outer half visible. The visible outline is half the width you write, so make it thicker.
The preview gives the text a 0.12em outline with -webkit-text-stroke.
Watch out
- It works on outlined HTML text from Chrome and Edge 123, Firefox 60, and Safari 11. Earlier Chrome, Edge, and Safari apply it only to SVG shapes and text.
markersare the arrows and other symbols attached with marker-start and similar properties to SVG elements such as path and line. HTML text has no markers, so moving them in the order changes nothing.