StrokeText

Options

outline #36362f

css colour

The outline. It carries the whole letterform while the ink is still low, so it wants enough contrast against the paper to be read on its own.

ink #c44400

css colour

The ink that fills the letters. A second colour is worth having: ink the same colour as the outline gives a letter that simply goes solid, and the point is to watch it fill.

paper #fbfaf4

css colour

What the hollow of a letter shows, and it must match the page behind the element. Load-bearing rather than decorative: this is the colour that paints over the inner half of the stroke, so if it is wrong every counter is wrong and the outline looks twice as thick as it is.

width 0.022

0.002 to 0.1 em, good: 0.012 to 0.04

Width of the outline, in ems, so it holds at any size. This is the real outside width: the stroke actually drawn is twice this and the inner half is covered. Past about 0.05 the outline starts closing the counters from the outside instead, which no trick can fix.

level 1

0 to 1

How full the letters are when the run has finished. 1 fills them completely and ends on solid type. Around 0.6 leaves them half inked, which is the more interesting place to stop and reads as a block that has been rolled once.

duration 2400

200 to 20000 ms

Milliseconds for the ink to rise, eased so it arrives rather than stops. Slow enough to watch: the rise is the effect and the outline is only where it starts.

hold 300

0 to 5000 ms

Milliseconds of empty outline before the ink starts. Worth having: it is the moment that tells you the letters were hollow to begin with.

tilt 2.5

-15 to 15 deg

How far the ink line is off level. A roller is not level, and a dead horizontal edge across a line of type reads as a mask. Two or three degrees is enough to be felt without being seen.

wobble 0.3

0 to 1

How uneven the height of the ink is. Small, and fixed by the seed rather than moving: a roller lays an uneven line, it does not lay a wavy one.

seed 7

0 to 9999

Seed for the unevenness. The same seed gives the same pull, so a recording and a live page match.

reducedMotionTime 999

0 to 9999 s

The single frame shown when the user prefers reduced motion. For a one-shot rise this should be a time after it has finished, so the letters are inked to the level set. Setting it to 0 instead gives the hollow outline, which is also a perfectly good still.

What it needs

Category

Type, an effect

Dependencies

None at all

Browser

No WebGL

Frame budget

~0.3 ms · 0 context

Pinned to

v0.13.0

• -webkit-text-stroke centres the stroke on the letterform, so half of it is painted inside the glyph. On a light weight that half eats the counters: the inside of an o closes up, an e fills in, and the setting goes muddy at exactly the widths where an outline is worth having. A face designed as an inline puts the stroke outside the letter
• The fix needs no new CSS and works everywhere. The text is drawn twice: behind, a stroke of twice the width asked for, centred, so it reaches the right distance outside the letter; in front, the same text filled, painting over the inner half. What is left is an outside-only stroke of exactly the width given, with the counters intact
• The animated thing is the ink. The front layer is a gradient clipped to the text with a hard edge in it, so below the edge the letter is solid and above it the letter is paper. Moving the edge fills the type from the foot up, which is what inking a block looks like
• The ink line tilts and has a small wobble, because a roller is not level. A dead horizontal edge across a line of type reads as a mask rather than as a surface of ink
• `paper` has to match the page behind the element. It is not decoration: it is the colour that covers the inner half of the stroke, so if it is wrong the hollow of every letter is wrong and the outline looks twice as thick as it is
• The stroked copy is the one in the flow and the one a screen reader reaches. The filled copy on top is marked hidden, because the text underneath is the real text and the layer over it is paint
• -webkit-text-fill-color is set as well as color on the front layer. Without it WebKit paints the text over the clipped background and the fill never shows at all
• Two copies of the text and one gradient string per frame, written only when it changes. Text strokes and background-clip are both painted rather than composited, so this wants to be a heading
• Nothing is created after mount and nothing is measured