Use
Written in Draft, the style taken from engineering drawings
The library is a set of JavaScript modules with no dependencies. It is not yet published as a package. To use it now, copy the kit and fonts folders from this site into yours, keeping them side by side, and import rubricate.
Markup
Write the text as you would without illum. rubricate reads ordinary elements and a few classes.
| It draws | where it finds |
|---|---|
| a drop initial | <span class="ini drop" data-lines="4"> round the first letter |
| an initial in the line | <span class="ini"> |
| a paraph | <p class="par"> |
| a line-filler | the free end of a last line, in the elements named by select.filler |
| a break | <hr>, or <hr data-rank="2"> between books |
| a frame | blockquote, figure, pre, .pull, aside, nav |
The initial’s letter stays in the text and is read once by a screen reader. Make it color: transparent, and give a drop initial float: left; the ink is drawn behind it.
The call
import { rubricate } from './kit/illum.js';
const r = rubricate(document.querySelector('article'), {
style: 'astrology',
rich: 0.5,
draw: 'read',
initial: { title: 'Anno Dom: 1853' },
});
r.redraw({ seed: 7 });
r.destroy(); r.redraw(options) draws again with the new options. r.destroy() removes the ornament and leaves the text as it was.
Options
| option | values |
|---|---|
style | 'blackletter', 'tarot', 'occult', 'astrology', 'draft' |
rich | 0 to 1, in five steps: plain, modest, usual, fine, lavish. Default 0.5. Only Blackletter has marks above usual so far. |
seed | a whole number. Default: a hash of the text, so the same text is always drawn the same way. |
draw | 'still' (default); 'read', each mark written as its line comes into view; 'now', the whole page written in order. |
theme | 'auto' (default), 'light' or 'dark'. |
initial | the style’s drop initial: { set, title } for Tarot, Occult and Astrology, { set } for Draft. |
frame | Astrology’s figure frame: { form: 'octagon' } or 'houses'. |
select | selectors that replace the defaults, such as { filler: 'h2, p' }. |
on | a function, called with 'drawn', 'reading' or 'written'. |
The host page
The page sets three CSS custom properties and illum reads them: --paper for the ground, --ink for the text, --rubric for the headings. Each style brings its own inks for light and dark grounds. It never paints the page’s ground or its text. With theme: 'auto' it follows data-theme on the <html> element, or else the reader’s system setting.
The element that holds the text must be positioned. The ornament is drawn on two canvases inside it, marked aria-hidden. Frames are drawn in the padding of their boxes, so a quotation or a block of code needs room round it, and each style needs a different amount. This site’s specimen stylesheet has working values for all five.
What it costs
The modules come to 667 KB, or 226 KB compressed with gzip, and a page loads all five styles. The faces a style draws its letters from are loaded only when that style is used. The ink engine needs WebGL2; without it a simpler pen draws the same marks. When the reader’s system asks for reduced motion, nothing is written as they watch. illum makes no network requests beyond its own files.