Skip to content

Article CSS

For examples in context, see Styling articles. Rendered results are screenshots from Monokakido 1.4.6.

Layout and appearance

Feature Syntax and use Rendered
Writing direction body { writing-mode: vertical-rl; }. The parser also accepts horizontal-tb and vertical-lr. Set the article direction on body. The same text in horizontal-tb on the left and vertical-rl on the right
Horizontal group text-combine-horizontal: all keeps a short span together. none restores normal orientation. Apply all to the number or label, not the whole paragraph. 12 with all on the left and none on the right
Upright characters text-combine-horizontal: full-width makes individual Latin letters and digits upright. It does not rewrite them as full-width Unicode characters. 12 upright, one digit per position
Warichu display: warichu; font-size: 0.5em divides an annotation into two small lines. Two-line reading ソウケツ・ソウキツ
Ruby display: ruby, ruby-base, ruby-text style the container, base and reading. Use ruby markup. Ruby readings in 例解学習国語
Gaiji images display: gaiji; height: 1.1em gives an image text-like placement and colouring. See gaiji registration. Inline gaiji beside the reading
Mathematics display: math interprets formula text. See the notation reference. a over b
Hanging marker display: hang places a marker outside the paragraph's text edge. Triangle markers outside aligned text
Arrow border border-shape: arrow-box or arrow-box-lr points one way, arrow-box-rl the other. default restores an ordinary border. Right- and left-pointing 組成 labels Official example
Pitch accent text-decoration: accent draws a high-pitch line and final drop. Pitch-accent lines over readings
Midpoint dot text-decoration: midpoint puts one dot at the middle of the decorated span, not one dot per character. One dot below the middle of つぐみ
Decoration colour and width text-decoration-color: #175C80; text-decoration-width: 0.12em adjusts a decoration. Thick blue accent line
Font glyph glyph: 11307 selects a glyph ID in the current font. It is not a Unicode code point. Font-specific boxed zero accent mark
Font feature glyph-form: ital selects one four-character OpenType feature tag. Other tags, such as jp90, depend on the font. Italic x within Japanese text
Named and night colours @color birb-blue = #175C80; defines a name for color, background-color and borders. Override the name in the sibling -nightmode.css stylesheet. Distinct named colours at night
Image scale img { zoom: 60%; } scales the image's natural dimensions before fitting it to the available space. normal restores 100%. This does not scale ordinary text. Saberlion at normal scale on the left and 60 percent on the right

Selection & copying

These controls only affect interaction.

Property Behaviour Rendered
word-select: word Expands a word selection. woodland selected as one word
word-select: character Suppresses word expansion. Double-clicking no longer selects the whole word. Narrow selection instead of the whole word
user-select: none Prevents selection of the span. text allows it, auto uses the default. The -webkit-user-select is also accepted. Unselectable grey span beside selectable text
user-select: nocopy Leaves text visible but excludes it from copied text. Copying this paragraph yields only Copied birb. Visible Not copied span beside Copied birb
speech: disabled / enabled Excludes or includes text in native read-aloud. Here playback begins with The, skipping Silent birb. Native speech highlight starts after the disabled span