Tategaki

Tategaki translates HTML elements to vertical writing.

Usage

As module

Install with npm install tategaki.

Import Tategaki:

import { Tategaki } from 'tategaki'

Link an HTMLElement and parse. Suppose the root article is an Element:

// Example (default configuration)
let tategaki = new Tategaki(article, {
    shouldPcS: true,
    imitatePcS: true,
    imitatePcFwid: true,
    imitateTcyShortWord: false,
    shouldRemoveStyle: false,
    convertNewlineCustom: false
})
tategaki.parse()

// Configuration explained
interface Config {
    /** Punctuation Squeeze (PcS) */
    shouldPcS?: boolean
    /** Use customised PcS tagging instead of OpenType feature `vhal`. */
    imitatePcS?: boolean
    /** Transform certain half-width puncuations to full-width ones without using OpenType `fwid`. */
    imitatePcFwid?: boolean

    /* imitateTcyShortWord?: boolean (Deprecated)
     *
     * Rotate words of short length.
     * The original width of a word will be calculated and compared with a threshold value.
     */

    /** Not allow the last line of a paragraph to only contain a single Kanji. */
    shouldAdjustOrphanLine?: boolean

    /** Remove `style`, `width` and `height` attributes. */
    shouldRemoveStyle?: boolean
    /** Convert multiple `\n`s to a customised newline element. */
    convertNewlineCustom?: boolean
}

A tategaki class will be attached to the root element.
It'll separate the element into several types of <span> (cjk, latin, etc. ) so that its style can be further customised.
Punctuation Squeeze (PcS) will be automatically applied. You can turn it off when initialising.
You can also import tategaki.css (listed below) for styling.

Advanced

You can also use your own DOM (like linkedom, JSDOM):

let tategaki = new Tategaki(article, config, document)

Embedded in HTML

In <head>:

<link rel="stylesheet" href="https://unpkg.com/tategaki/assets/tategaki.css" />

At the bottom of <body>:

<script src="https://unpkg.com/tategaki/dist/tategaki.min.js"></script>

An element with tategaki class will be parsed and styled.

Recommended Style

Text

.tategaki {
    writing-mode: vertical-rl;

    text-align: justify;
}

.latin {
    -webkit-hyphens: auto;
    hyphens: auto;

    -webkit-hyphenate-limit-before: 3;
    -webkit-hyphenate-limit-after: 2;
    -ms-hyphenate-limit-chars: 6 3 2;
    hyphenate-limit-chars: 6 3 2;
}

.kana {
    font-feature-settings: "vpal";
}

Tategaki-Chyu-Yokogaki

.tcy {
    -webkit-text-combine: horizontal;
    -ms-text-combine-horizontal: all;
    text-combine-upright: all;
    position: static !important;
}

.full-width {
    font-feature-settings: "fwid";
    text-transform: full-width;
}

Punctuation Adjustment

/* Correct CJK dashes */
.aalt-on {
    font-feature-settings: "aalt";
}

/* Imitate PcS (Add space and strink height)  */
.imitate-pcs .squeeze-out {
    letter-spacing: -0.5rem;
}

.imitate-pcs .squeeze-in {
    margin-top: -0.5rem;
}

.squeeze-in + .squeeze-in-space {
    display: none;
}

.squeeze-other-punc + .squeeze-in-space {
    display: none;
}

.squeeze-out-space {
    display: none;
}

.squeeze-out-space:last-child {
    display: inline;
}

/* PcS: Using OpenType `vhal` */
.opentype-pcs .squeeze-other-punc + .squeeze-in {
    font-feature-settings: "vhal";
}

.opentype-pcs .squeeze-in + .squeeze-in {
    font-feature-settings: "vhal";
}

.opentype-pcs .squeeze-out {
    font-feature-settings: "vhal";
}

.opentype-pcs .squeeze-out:last-child {
    font-feature-settings: "vhal" 0;
}

.safari .squeeze-other-punc {
    font-feature-settings: 'locl';
}

Correct Punctuations for `zh-cn`

.safari .squeeze-other-punc {
    font-feature-settings: 'locl';
}

/* Disable glyph replacement in context for Firefox and Chrome */
.firefox .squeeze-other-punc:last-child {
    margin-bottom: -1rem;
}

.chrome .squeeze-other-punc:only-child,
.firefox .squeeze-other-punc:only-child::before {
    margin-top: -1rem;
}

.chrome .squeeze-other-punc:only-child::before,
.firefox .squeeze-other-punc:only-child::before,
.firefox .squeeze-other-punc:last-child::after {
    content: '\2060〇'; /* U+2060 WORD JOINER, avoid punc being first in a line */
    opacity: 0;
}

License

Distributed under the MIT License. See LICENSE for more information.

Denkiame/Tategaki