One stylesheet, no script, and it still survives line wrapping because the stroke is a background, not an overlay.
Trade-off: every instance of a shape looks the same, and there is no draw-on animation. If you want per-element wobble or the pen stroke reveal, use the JS build instead.
The stroke is an SVG background-image: a band under the baseline for
underline, double, scribble and curve, through the
middle for strike, and behind the whole line for marker. Backgrounds
already repaint per line box, so wrapped text is handled with no measuring, no resize listeners and
no layout reads. Pick a shape class, then an ink class.
<link rel="stylesheet" href="scrawl.css"> <span class="scrawl scrawl--scribble scrawl--red"> like this </span>
read this bit twice
set this in italics
not quite sure yet
one confident sweep
cut on second pass
the important sentence
check these figures
box uses border-image rather than a background, so its corners hold their
shape while the edges stretch instead of tiling.
Six ink classes ship with it: .scrawl--blue, .scrawl--red,
.scrawl--yellow, .scrawl--green, .scrawl--lead and
.scrawl--paper for dark backgrounds. Leave the ink class off for near black. Colour has to
be baked into the SVG because a data URI cannot read a custom property, which is the one real
limitation here. Adding your own means copying a rule and swapping its hex colour.
| Property | Default | What it does |
|---|---|---|
| --scrawl-height | 0.34em | How tall the stroke band is. |
| --scrawl-tile | 5.5em | How often the wobble repeats. Smaller means busier. |
| --scrawl-drop | 0em | Lifts the stroke towards the baseline. Go negative to push it lower. |
Shorthand classes for the common tweaks: .scrawl--thin, .scrawl--thick,
.scrawl--tight, .scrawl--loose, .scrawl--low. Each only
reaches a shape that reads the variable behind it, so marker ignores height and drop,
curve ignores tile, and box ignores all three because it draws with
border-image rather than a background.
The whole point of doing this with a background is that a run of text that spills across three or four lines still gets a stroke on every one of them, with no measuring, and it keeps working when the reader bumps their font size up.
box-decoration-break: clone makes each line fragment take its own copy rather than
one background stretched across the lot.
Check this with
legal before it ships
scrawl-note.css is its own small stylesheet, so a note needs no script and no
scrawl.css. Set --scrawl-note for the paper's colour and
--scrawl-tilt for how crooked it is stuck on. The handwriting is yours to bring; this page
uses Caveat. With the JS build, a curl can point from the note at
whatever it is about.
<link rel="stylesheet" href="scrawl-note.css"> <p class="scrawl-note">Check this with legal before it ships</p>