::first-letter以外を隠す

ちょっとした目的があって、文章(や単語)の最初の一文字だけ残してあとは隠すみたいなことをやりたかった。::first-letter擬似要素では特定のプロパティーしか利用できないので、::before擬似要素を使った画像置換のような手法では行えない。ちょっと悩んだけどmargin-rightプロパティーが使えたのでそれで残りを弾き出してやるという方法に落ち着いた。

Demo: Hide Other Than ::first-letter

::first-letter擬似要素の親になる要素の幅を一文字分に制限してやり、それ以外をoverflowとwhite-spaceプロパティーを組み合わせて隠している。このままだとIなど幅が狭いグリフが一文字目の場合に二文字目が見えてしまう(Wなどでは逆に切れたりもする)ので、::first-letter擬似要素でmargin-rightプロパティーを使って制限した幅分押し出すようにし、確実に一文字しか表示しないようにできる。

.test .hide {
  width: 0.5em;
  overflow: hidden;
  white-space: nowrap;
}

.test .hide:first-letter {
  margin-right: 0.5em;
}

プロポーショナル・フォントだとグリフの幅は不定なので、デモのように等幅フォントを、できればウェブフォントで採用するのが望ましい。そうすればほぼ確実な幅を知ることができ、一文字目で確保すべき幅を決定できる。等幅フォントを使えない・使いたくない場合は、一文字目に来る文字に合わせるか一番幅が広いことが多いWなどを基準にして幅を決定すると良い。

このウェブサイトではグローバル・フッターにあるTwitterなどへのリンクで、狭い画面の時だけ使っている。TでTwitter、GでGitHub、そしてPでPinboardなんだけど、一文字じゃさすがにわからない……。