Reading · Back to tools
Vertical & Horizontal Preview
Japanese can be written in two directions, and the two look like different languages to the eye. Here is the switch, in twenty lines of CSS.
The opening of たけくらべ (Higuchi Ichiyō, 1895), set as the Aozora Bunko base text sets it.
How it works
- Load the sample sentence, or paste your own Japanese into the frame.
- Toggle 縦書き / 横書き. On a phone the vertical mode is still readable, which is not true of most vertical Japanese layouts.
- Toggle ruby to see the reading aid on and off.
Notes
- Vertical setting uses CSS writing-mode, the same mechanism the reading tool uses.
- Long vowels, small kana and closing brackets are the three things that break in naive vertical layouts. They are handled here.
- The sample sentence is a public-domain line from the Aozora Bunko base text of たけくらべ.
| Runtime | Browser, no build step |
|---|---|
| Network | None after load |
| Storage | None |
All tools
| 02 | Kana ConverterHiragana to katakana and back, with half-width and full-width handling. Paste any Japanese and read the result out loud before you commit it. | Browser |
| 03 | Gojūon with Pitch AccentThe fifty-six cells of the kana grid, each with its modern Tokyo pitch pattern, a sample word, and the mora count that makes the contour predictable. | Browser |