Lining.js – 複数行表示に使えるスタイルシートライブラリ
スタイルシートは便利になっていて、多数の機能を備えるようになっています。CSSセレクタを使って細かく要素を指定できるようになっていますが、それでも足らないものがあります。それが複数行記述した時の、2行目、3行目の指定法です。 そうした指定法はなく、JavaScriptで対応する他なかったのですが、Lining.jsはその行ごとの指定を可能にしてくれるライブラリです。
Lining.jsの使い方
例えばスタイルシートを次のように記述します。
.poem {
line-height: 40px;
font-size: 32px;
font-family: 'Dancing Script' serif;
}
.poem .line:nth-of-type(-n+2) {
font-size: 42px;
color: #DA4453;
}
次のスタイル。
.fadeout {
font-size: 36px;
line-height: 36px;
color: hsla(354, 67%, 46%, 1);
font-family: 'Handlee' serif;
}
.fadeout .line:nth-last-of-type(3) {
color: hsla(354, 67%, 55%, 1);
font-size: 80%;
}
.fadeout .line:nth-last-of-type(2) {
color: hsla(354, 67%, 60%, 1);
font-size: 70%;
}
.fadeout .line:nth-last-of-type(1) {
color: hsla(354, 67%, 65%, 1);
font-size: 60%
}
.linenumber .line {
position: relative;
margin-left: 32px; /* 16 * 2*/
}
.linenumber .line:before {
content: attr(index) '.';
position: absolute;
right: 10px;
margin-right: 100%;
width: 1em;
font-size: 16px;
text-align: center;
color: #999;
}
.vtxt {
font-size: 24px;
color: #333;
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
}
.vtxt .line:first-of-type {
font-size: 1.5em;
color: #D0496A;
}
.vtxt .line:first-of-type small {
color: #333;
font-size: .6666666em;
}
Lining.jsを使うと段落の中のテキストをうまく表現できるようになるでしょう。2行目以降は徐々に小さくしたり、薄くするといった指定もできるはずです。テキストの表現力をあげるために知っておきたいライブラリです。
Lining.jsはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。