ITエンジニア/デザイナ向けにオープンソースを毎日紹介

スタイルシートは便利になっていて、多数の機能を備えるようになっています。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;
}

こちらが結果。3行目からスタイルが変わっています。
こちらが結果。3行目からスタイルが変わっています。

次のスタイル。

.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;
}

こちらは行数を記述するという方法です。contentでうまく行っています。
こちらは行数を記述するという方法です。contentでうまく行っています。

.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のオープンソース・ソフトウェアです。

Lining.js

zmmbreeze/lining.js

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2