web-dev-qa-db-ja.com

HTML / CSSで自動ハイフネーションを有効にすることはできますか？

私のクライアントは、このページで自動ハイフネーションを有効にするようにリクエストしました： http://carlosdinizart.com/biography/ 、ウェブページで実際にそれを見たことがないことに気付きました。

HTML/CSSだけでHTMLドキュメントに自動ハイフネーションを設定することは可能ですか？そうでない場合-オプションは何ですか？

htmlcsshyphenation
39
hanazair

CSS3はこれをサポートしています。ソース： http://drublic.de/blog/css3-auto-hyphenation-for-text-elements/ ここでw3cのドキュメントを確認できます： http：//www.w3 .org/TR/2011/WD-css3-text-20110901 /＃hyphenation

CSS3は、便利なもののリストに6つのプロパティを追加します。これらは：

  • 最も重要なのはhyphensです。
  • hyphenate-resourceを使用して辞書ファイルを追加できるため、ブラウザーは正しいハイフネーションでテキストをレンダリングする可能性が高くなります。
  • hyphenate-beforeは、ハイフネーションの前の最小文字数を設定します。
  • hyphenate-afterはhyphenate-beforeと同じですが、ハイフネーション後の文字に対して機能します。
  • hyphenate-linesは、ハイフンでつながれたWordが最大で何行書かれるかについて定義します。 hyphenate-characterを使用すると、使用するHTMLエンティティを指定できます。 \2010。

このスタックの主なプロパティはhyphensです。 none、manual、またはautoの3つの値のいずれかを受け入れます。デフォルトは手動で、­を介してハイフンを設定できます。 autoそれは連続テキストに適したものですが、可能であれば単語は分割されます。また、noneは、特定のWordで改行の可能性がある文字セットがあっても、まったくハイフネーションを行いません。

更新：

ブラウザサポート情報はこちら： http://caniuse.com/css-hyphens

39
Ninja

オプションは、テキストのmayが壊れる場所に soft hyphens を挿入することです。ソフトハイフンは、HTMLのエンティティ­で表されます。適切な場所で­sを使用してテキストを自動的に準備できるライブラリ/ツールが見つかる場合があります。そうでない場合は、手動で作成する必要があります。

13
deceze

テキストの幅が固定されている1つのページを処理するには、エンティティ参照­を入力するよりも快適な場合は（見えない）キャラクター自体。良好な結果を得るには、どの単語をハイフネーションする必要があるかをかなりすばやく見つけることができます。

より複雑な場合（複数のページ、幅が可変）、プリプロセッサ、サーバー側コード、またはソフトハイフンを追加するクライアント側コードを使用します。クライアント側のアプローチは最も単純で、サーバー側のテクノロジーやオーサリングツールとは無関係に適用できます。自動ハイフネーションが間違っている可能性があり、いくつかの助けが必要なことに注意してください：テキストの言語をマークアップで示す必要があります（または、使用するライブラリに応じて）.

最低限、属性lang=en class=hyphenateを<body>タグに挿入し、head部分に次のコードを挿入するだけで済みます。

<script 
  src="http://hyphenator.googlecode.com/svn/tags/Version%204.0.0/Hyphenator.js">
</script>
<script>Hyphenator.run();</script>

デモ： http://bytelevelbooks.com/code/javascript/hyphenation.html （最大幅が設定された柔軟な幅のテキスト。ブラウザのウィンドウ幅を変えてテストできます）。

9
Jukka K. Korpela

現在、<p>は

p   {
    font-style: normal;
    padding: 0;
    margin-top: 0;
    margin-left: 0px ;
    margin-right: .5em ;
    margin-bottom: 0;
    text-indent: 1em;
    text-align: justify;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    -o-hyphens: auto;
    Word-break:break-Word;
    hyphens: auto;
}

これは、MacではChrome 39では動作しません。Operaでは動作しないことが知られています。Firefox、iOS Safariで動作します。

これは絶対確実ではありません：狭い列（6ワード未満）はいですが、全体的にはレイアウトが適切に設定されたタイプのように見えます。

3
Sherwood Botsford