Take control of Japanese typesetting on the web
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore
README.md
demo.html
mojik.css
mojik.js
package.json

README.md

Mojik

Mojikは、ウェブにおける和文の文字組みをコントロールするためのJavaScriptライブラリです。現在のところ、以下のパターンでの「アキ」の調整ができます。

  • 連続する約物のアキ
  • 行頭の始め括弧のアキ
  • 和欧間のアキ

Mojik is a JavaScript library which makes Japanese typography more beautiful on the web. Currently, it makes adjustments to spacing for the cases:

  • Spaces between consecutive punctuation marks
  • Space before a punctuation mark at the beginning of a line
  • Space between Japanese and Latin characters

デモ Demo

https://terkel.github.io/mojik/

使い方 How to use it

ファイル一式をダウンロード、もしくはnpmからインストールします。
Download all files or install via npm.

mojik.cssmojik.jsをHTMLドキュメントに読み込みます。
Add mojik.css and mojik.js to your HTML document.

<link rel="stylesheet" href="path/to/mojik.css">
<script src="path/to/mojik.js"></script>

Mojik.compose()メソッドを呼び出します。引数には、文字組みを適用したい段落や見出しなどのCSSセレクターを渡します。
Call the Mojik.compose() method. Use the parameter to pass the CSS selector to text elements.

<script>
Mojik.compose(".ArticleBody p");
</script>

文字組を適用したくない箇所は.mjk-ignoreでマークアップします。

<p>ありがとう<span class="mjk-ignore">ヾ(๑╹◡╹)ノ</span></p>

各アキ量はCSSで調整します。
Set the spacing amount using CSS.

.mjk-western-number {
    margin-left: 0.166ch;
    margin-right: 0.166ch;
}

オプション Options

Mojik.compose()の2番目の引数でオプションを指定できます。

Mojik.compose("main h1", { supportOldAndroid: true });
  • doubleDash: ダッシュ(U+2014 EM DASHまたはU+2015 HORIZONTAL BAR)が2つ以上連続したとき、それらがつながっているように見せる(実際には1つのダッシュをCSSで横方向に拡大している)。デフォルトはfalse
  • spaceInsideWesternBrackets: 欧文括弧類(()[]{}“”)の内側と和文の間にアキを持たせる。デフォルトはfalse
  • supportOldAndroid: Noto Sans CJKの入っていない、バージョン5までのAndroidをサポートするかどうか。デフォルトはfalse(参考:#25

ライセンス License

このプロジェクトはMITライセンスのもとで公開されています。
This project is released under the MIT License.