Components / Japan / Tategaki
Tategaki beta
Vertical Japanese text, set properly: shuhari — obey the form, break the form, leave the form — as an editorial monument.
Shuhari — the discipline of the form
Obey the form. Learn the mold exactly as it is, until the hands know it.
Break the form. Deliberately, in the open, where the break can be judged.
Leave the form. The mold made the work; it does not get to keep it.
<div class="k-tate">
<div class="k-tate-v" aria-hidden="true"><span class="k-tate-ch d1">守</span><span class="k-tate-ch d2">破</span><span class="k-tate-ch d3">離</span></div>
<div class="k-tate-gloss">
<p class="en">Shuhari — the discipline of the form</p>
<div><b><span>守</span>Shu</b><p>Obey the form. Learn the mold exactly as it is, until the hands know it.</p></div>
<div><b><span>破</span>Ha</b><p>Break the form. Deliberately, in the open, where the break can be judged.</p></div>
<div><b><span>離</span>Ri</b><p>Leave the form. The mold made the work; it does not get to keep it.</p></div>
</div>
</div>/* KATA Tategaki — vertical text, set properly. */
.k-tate{display:flex;gap:34px;align-items:stretch;background:var(--k-bg);border:1px solid var(--k-line);border-radius:14px;padding:26px;font-family:var(--k-font);color:var(--k-ink)}
.k-tate-v{writing-mode:vertical-rl;font-family:"Hiragino Mincho ProN","YuMincho",serif;font-size:44px;font-weight:600;letter-spacing:.32em;line-height:1;display:flex}
.k-tate-ch{animation:k-tate-in 1s cubic-bezier(.2,.7,.2,1) both}
.k-tate-ch.d1{animation-delay:.05s}.k-tate-ch.d2{animation-delay:.22s}.k-tate-ch.d3{animation-delay:.39s}
@keyframes k-tate-in{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.k-tate-gloss{border-inline-start:1px solid var(--k-line);padding-inline-start:24px;display:flex;flex-direction:column;justify-content:center;gap:13px}
.k-tate-gloss div b{font-size:14px;font-weight:650}
.k-tate-gloss div b span{font-family:"Hiragino Mincho ProN","YuMincho",serif;margin-inline-end:8px}
.k-tate-gloss div p{font-size:12.5px;color:var(--k-ink-2);line-height:1.65}
.k-tate-gloss .en{font-size:10.5px;font-weight:650;letter-spacing:.18em;color:var(--k-ink-3);text-transform:uppercase}
@media (prefers-reduced-motion:reduce){.k-tate-ch{animation:none}}
Installation
CLI
node kata-ui.mjs add tategaki
Writes the part’s CSS into your project. New to the CLI? See the CLI doc.
Manual
- Load
tokens.cssonce, before any part. - Copy the CSS tab into your stylesheet.
- Copy the HTML where it belongs.
Usage
Tategaki is not rotated text: writing-mode vertical-rl lays the columns right-to-left with the glyphs upright, the way a book opens. The three characters are shuhari (守破離), the craft discipline this whole library runs on — first obey the mold, then break it deliberately, then leave it behind. Use the part for chapter heads, manifestos, and the page that states what a studio believes.
Accessibility
Vertical text is genuinely harder for some readers, so the part always travels with its horizontal gloss: the three terms, translated, in reading order beside it. Screen readers receive the text in DOM order — characters, then gloss — regardless of the visual direction.
Anatomy
The public surface of this part, read from its own source. Class names are the API — the CSS tab above is the full contract.
.k-tate | class |
.k-tate-v | class |
.k-tate-ch | class |
.d1 | class |
.d2 | class |
.d3 | class |
.k-tate-gloss | class |
.en | class |
aria-hidden | ARIA |
Related parts
Hanko beta
A vermillion seal that stamps: the shu-iro signature for approvals, authorship and things that are done.
Kintsugi Card beta
A status card repaired in gold: the cracks of an incident, drawn as kintsugi veins that mend on arrival.
Noren beta
A noren curtain as a section divider: three hanging panels that sway, and part when you reach for them.
Wagara beta
Ten classical Japanese patterns, constructed — not pasted: seigaiha waves, asanoha hemp, shippo circles, ichimatsu checks, kikko hexagons, uroko scales, sharkskin dots, arrow feathers, fawn spots and the diamond lattice.