Tategaki translates HTML elements to vertical writing.
Install with npm install tategaki.
- Import
Tategaki:
import { Tategaki } from 'tategaki'- Link an
HTMLElementand parse. Suppose the rootarticleis anElement:
// 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
tategakiclass 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.
You can also use your own DOM (like linkedom, JSDOM):
let tategaki = new Tategaki(article, config, document)- 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.
.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";
}.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;
}/* 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';
}.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;
}Distributed under the MIT License. See LICENSE for more information.