2014-03-25

リンクの下線の再発明

少し前までは「リンクの下線を消すな、いやでも消したい」みたいなことしか話題にならなかったのに時代は変わったなどということをMediumのためのリンクの下線の再発明といった趣向の記事を読んで思った。僕も以前これと似たような方法(後述)でリンクの下線の再実装を行ったことがあるので、楽しく読んだ。この辺りの制御を行うCSSプロパティー達の実装が後回しにされてる現状は悲しい。

僕はborderで線を引いた擬似要素を絶対配置するというような手法で行っていた。

.entry-content a {
  position: relative;
  color: inherit;
  text-decoration: none;
}

.entry-content a::after {
  border-bottom: 1px solid #f0f;
  display: block;
  position: absolute;
  bottom: 0.125em;
  z-index: -1;
  width: 100%;
  height: 0;
  content: "";
}

たかが下線に……という感じではある。やりたかったのは色変えと下線位置の微調整。下線の位置はInternet Explorer 5あたりからなかなかの暴れん坊っぷりだったので、わざわざ最適化されるように改変されたフォントがあったりする程度に気にしている人はいた。Mediumの記事でも触れられているように、ベースラインとディセンダラインの中間くらいにグリフの下にうまく引きたいという感じでこうやっていた。

この方法はリンクが折り返しをまたぐ時に下線が表示されなくなるため、a要素にwhite-space: nowrapしたりする必要が出て来ることがわかったので、実際にはお蔵入りにした。

実際に採用する・しないは別として、こういった再発明を行うことを通し、現状の実装にどういう不備や不満があるのかをはっきり知っておくと、今策定中の仕様がどうしてこういう迂遠なものになっているのかとかがわかるようになる。そうすると仕様の読解力、引いてはCSSの実装力が高まるんじゃないかと思っている。