CSS first
text-spacing-trimとtext-autospaceに対応したブラウザでは、その実装をそのまま使います。追加のスクリプトは読み込まれず、実行もされません。
Japanese typography compatibility layer
Webの日本語を
端正にする
日本語の本文をWebに載せると、括弧の前後が間延びし、和文と欧文の境目が窮屈になります。Mojikumiは、ブラウザの実装だけでは揃いきらないこの差を標準CSSの上で補い、本文の字面を整えます。文字列そのものは書き換えないため、コピーした文章も読み上げの内容も元のままです。
TYPE SAMPLE / 01
『美しい本文』は、文字そのものだけでなく、文字と文字のあいだに宿ります。
Principles
標準実装を活かし、足りない分だけを補う
Small fallback
標準実装で届かない処理だけを、あとから補います。本文の文字列そのものには手を加えないため、読者がコピーした文章も、スクリーンリーダーが読み上げる内容も元のまま保たれます。
Framework ready
素のHTML、React、Markdownのいずれでも、同じ字組み方針をそのまま持ち込めます。環境ごとに設定を書き分ける必要はありません。
Before / After
半字ぶんの差が、読み心地を変える
同じ文章を、約物調整なしの状態とMojikumiを適用した状態で並べています。括弧の前後や句読点のあとに空いていた半字ぶんの空白が詰まり、字面のムラが消えて一行に入る字数が増えます。
『日本語組版処理の要件（JLREQ）』は、行末に置いた終わり括弧類や句読点について「その後ろを原則として二分アキとする」と定めたうえで、行の調整処理で詰めてベタ組にしてもよい、と述べています〈W3C技術ノート、2012年、3.1.9〉。約物が連続する箇所、たとえば「『引用』」や〈補足（注記）〉でアキを重ねないのも、同じ体裁上の判断です。
『日本語組版処理の要件（JLREQ）』は、行末に置いた終わり括弧類や句読点について「その後ろを原則として二分アキとする」と定めたうえで、行の調整処理で詰めてベタ組にしてもよい、と述べています〈W3C技術ノート、2012年、3.1.9〉。約物が連続する箇所、たとえば「『引用』」や〈補足（注記）〉でアキを重ねないのも、同じ体裁上の判断です。
One policy, several surfaces
使う場所に合わせて、必要な層だけを選ぶ
導入はCSSを一行読み込むところから始められます。DOM層やReact、Markdown / MDXとの連携は、必要になった時点で追加すれば十分です。どの段階に進んでも、プロジェクトの構成を組み替える必要はありません。
mojikumi既定の構成をまとめた統合API@mojikumi/css標準CSS中心のプリセット@mojikumi/domブラウザ差を補うDOM層@mojikumi/reactComponentとHook@mojikumi/rehypeMarkdown / MDX連携See the difference
同じ文章で違いを確かめる
約物調整なし、YakuHanJP、標準CSS、Mojikumiの4つを並べ、行幅や文字サイズ、書体を切り替えながら見比べられます。入力欄にご自身の原稿を貼り付けて試すこともできます。
Playgroundを開く