Skip to content

Latest commit

 

History

History
90 lines (54 loc) · 3.16 KB

README.md

File metadata and controls

90 lines (54 loc) · 3.16 KB
Raw

简体中文

CJ Typographer

A optimizer for Chinese and Japanese typography on websites

Background

Both Chinese and Japanese mainly use full-width characters, including Chinese characters, kana and some full-width punctuations. For aesthetic reasons, consecutive full-width punctuations requires space adjustment. See Requirements for Japanese Text Layout for Japanese and Requirements for Chinese Text Layout for Chinese. Besides, extra spacing is necessary between full-width characters (Chinese characters and kana) and proportional-width character (Latin letters and digits).

Install

This project uses node and npm. Make sure you have had them installed.

$ git clone https://github.com/hiugiak/cj-typo.git
$ cd cj-typo
$ npm install
$ npm run build

Built files can be found under dist directory. Copy files under dist\ to your own project, and include them in HTML head:

<link href="cj-typo.css" rel="stylesheet">
<script src="cj-typo.min.js"></script>

Usage

If you want to optimize typography in all .cj-typo elements in Japanese style, run this Javascript code when HTML document is loaded:

var cjTypo = new CJTypo({
  lang: CJTypo.Lang.JP
})
cjTypo.render('.cj-typo');

Replace CJTypo.Lang.JP and .cj-typo with what you want. See Options section.

Check out sample for a preview.

Requirement: space adjustment between consecutive punctuations requires a font supports "halt" OpenType feature. Or you can use the fonts in fonts directory.

Options

  • lang: CJTypo.Lang

    Required. Which set of rules to be used, CJTypo.Lang.SC for simplified Chinese, CJTypo.Lang.TC for traditional Chinese and CJTypo.Lang.JP for Japanese.

  • autoSpace: boolean

    Add extra space between full-width character and proportional-width character if true.

    Default: true

  • compressPunctuations: boolean

    Compress punctuations if true.

    Default: true

  • includeLangCodes: string[]

    Language codes to include. If a child element's lang attribute is set to other language codes, it will be skipped. The default values depends on the 'lang' option. Specifying as * will skip language check.

    Default

    lang includeLangCodes
    TC zh, zh-TW, zh-HK
    SC zh, zh-CN
    JP ja

  • skipSelectors: string

    A child element will be skipped if it matches the selectors.

    Default: code,img

  • strictMode: boolean

    Match punctuation marks with precise unicodes, especially moddle dot "·" (U+00B7) in simplified Chinese, when strict mode is on. Otherwise, marks matching will be fuzzy, for example, U+00B7, U+2027 and U+30FB are all regarded as middle dot in simplified Chinese.

    Default: true

License

MIT @ Zhou Xiaojie