どうも、夏の兆しに苛まれてついついビールに手が延びてしまうよっしぃーです。

紙のデザイナー様からデータを頂いた際に、文字を両端揃えにしてくれと言われました。
通常なら

.text{
    text-align: justify;
}

で、両端揃えになると思ったのですが、どうもうまく行きませんでした。

どうしたらなるのかなぁと調べた所
こちらの記事を見つけました。

.fulljustify {
  text-align: justify;
}
.fulljustify:after {
  content: "";
  display: inline-block;
  width: 100%;
}

どういうことかというと、

  • 両端揃えしたい要素に:afterをつけて、
  • display: inline-block;をつける

ということです。

ただし、これを入れると文章の高さが変わったりしたので、
heightを指定して　overflow:hidden　を入れて対応しました。

それとIEがどうも対応してないようなので
text-justify: distribute-all-lines;
で対応しました。

あとコチラの記事に書いてたのですが、
WebKit で日本語の両端揃えが実装されていない
らしいですが、私が入れた所
Windowsに入れたsafariでない限りは大丈夫でした。

いろいろみていると日本語のwebは右の文字揃えがばらばらなサイトが多いという文を見つけ、
なるほどたしかになぁと思いました。

web業界では結構普通ですが、紙媒体のデザイナーだと気になるみたいですね。

そのうちそういった悩みを解決するreset.cssが出てくるといいですね。

強いて言えばweb上のテキストが汚い事が私は気になりますね(-_-;)
Honokaを使うとキレイになるらしいので、今度の機会に導入を検討してみようと思います。