amatsuchi
amatsuchi は「縦書き・横スクロール・レスポンシブWebサイト」専用のCSS・jsフレームワークです。
Web雑誌「偏向」のためのスタイルシートをライブラリ化しています。
-
手軽に印刷された縦書き文書のようなページを作ることができます。
-
「CSS Writing Modes Level3」を最大限活かした上で、ブラウザごとの差異を吸収できるよう微調整しています。多数あるjavascriptを利用した縦書きライブラリよりもレンダリングが美しく、軽量です。
-
スマートフォンでも美しいデザインを目指し実装しています。
使い方
- CSSファイルをインストールしてください。
npm install --save amatsuchi
- HTMLファイルのheadタグ内に、以下のようにlinkタグを追加してください。
<link rel="stylesheet" href="node_modules/amatsuchi/dist/amatsuchi.css">
ブラウザ判定(傍線などに使用)、句読点ぶら下げ機能を使う場合は、以下のjsも読み込んでください。
<script src="node_modules/amatsuchi/dist/main.js"/>
- ページに
amatsuchiクラスを追加してください。これにより、縦書きに最適化されたページが生成されます。
<body class="amatsuchi">
...
</body>
CSS
amatsuchiは、基本的なタグのオーバーライドやページ用のクラスを提供しています。ページに追加することで、簡単に縦書きに最適化されたデザインを実現できます。
また、Amatsuchi.cssはSCSSで記述されています。カスタムデザインを作成する場合は、変数をオーバーライドするか、SCSSファイルを編集してください。
.midashi-box
.midashi-boxは、見出しを囲む要素に追加するクラスです。以下のスタイルが適用されます。
- padding: 0 0 20px 20px;
.midashi-boxの子要素には.midashiと.hisshaがあります。.midashiは見出しのスタイルを設定し、.hisshaは署名を右寄せにします。
.yoko-bo
.yoko-boは、横書きに最適化された要素に追加するクラスです。以下のスタイルが適用されます。
- writing-mode: horizontal-tb;
.rinku
.rinkuは、下線を引く要素に追加するクラスです。以下のスタイルが適用されます。
- text-decoration-skip-ink: none;
- text-decoration-line: underline;
.migi-bo
.migi-boは、右に線を引く要素に追加するクラスです。以下のスタイルが適用されます。
- text-decoration-line: overline;
- text-decoration-skip-ink: none;
- text-decoration-thickness: from-font;
.hidari-bo
.hidari-boは、左に線を引く要素に追加するクラスです。以下のスタイルが適用されます。
- text-decoration-skip-ink: none;
- text-decoration-line: underline;
- text-decoration-thickness: from-font;
.migi-nami
.migi-namiは、右に波線を引く要素に追加するクラスです。以下のスタイルが適用されます。
- text-decoration-line: overline;
- text-decoration-skip-ink: none;
- text-decoration-thickness: from-font;
- text-decoration-style: wavy;
.hidari-nami
.hidari-namiは、左に波線を引く要素に追加するクラスです。以下のスタイルが適用されます。
- text-decoration-skip-ink: none;
- text-decoration-line: underline;
- text-decoration-thickness: from-font;
- text-decoration-style: wavy;
.dash
.dashは、文字と文字の間にダッシュを入れる要素に追加するクラスです。以下のスタイルが適用されます。
- letter-spacing: -0.2em;
- margin: 2px 0 4px 0;
.jisage
.jisageは、段落の先頭に字下げを設定する要素に追加するクラスです。以下のスタイルが適用されます。
- text-indent: 1rem;
js
句読点ぶら下げ
以下のように"burasage"クラスを付与してください。かつて存在したhanging-punctuationのような句読点ぶら下げをjavascriptによる処理で実現します。改行が減り、文章が読みやすくなります。
<body class="amatsuchi burasage">
...
</body>
フロートボタン
amatsuchiには、フロートボタン用のスタイルも含まれています。以下のように、ボタンを実装することができます。
<div id="ama-float">
<a href="#">トップへ</a>
</div>
ライセンス
amatsuchiはMITライセンスのもとで公開されています。詳細については、LICENSEファイルを参照してください。
最後に
amatsuchi は協力者を探しています。協力いただける方は 65bunjitsu@gmail.com or Twitter までご連絡お待ちしています。
本ライブラリはnpmに公開されています。
