[Solved] 【要望】 Qiitaサイト上でのword-break処理

対応のお礼

先程確認したところ、以下の要望について新たな修正されたCSSを参照するように変更されており、<p> 部分の禁則処理がうまく行われていることがわかりました。大変すばやいご対応ありがとうございました。

---

問題点

Qiitaの投稿内の文章が正しく禁則処理されません。英単語の途中、数字の途中、日本語開き括弧の後、日本語閉じ括弧や句読点の前で改行されてしまうことがあります。これがあると、文章部分がたいへん読みづらくなります。

原因

http://qiita.com/assets/bootstrap-public-application-b6cc1d3051504b7db626675ebb3ca05c.css に（このCSSが巨大なのはさておき）、

.markdown-content p, .preview-area p {
  word-wrap: break-word;
  word-break: break-all;
  ...
}

という部分があり、これが原因です。break-all は「（単語内の）どこででも改行可」という意味であるためです。

提案する解決策

通常の本文である <p> では、そのような指定をする利点はないと思います。この部分の break-all を normal に変更することでほとんどの問題は解消すると思います。

ただ、他にも、<h1> やアイテムのタイトル的な箇所にも同様の指定がしてあります。よほど表示幅が狭いなどの理由がなければ、これらも normal にした方がよいと思われます。

以上、ご検討いただければ幸いです。

当面のブラウザ側での対策

とりあえず自分が見る分だけでも読みやすくしたいという場合は、ブラウザ側でユーザースタイルシートを使えばすぐ解決します。FirefoxなどならStylish拡張を使って、

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("qiita.com") {
.markdown-content p, .preview-area p {
  word-break: normal !important;
}
}

という感じのスタイルを入れておけばいいでしょう。