2

句読点のぶら下げに関する記事を見つけました: http://webdesign.tutsplus.com/articles/getting-the-hang-of-hanging-punctuation--cms-19890 とコメント内のこのリンク: http://dabblet.com /gist/9623025

これは本当に素晴らしいアイデアで、HyphenatorやHypherなどのツールによって生成されたソフト ハイフンをぶら下げる素晴らしい方法になるでしょう。私はハイファーをいじり始め、ハイフンをスパンにカプセル化しました...

その後、ソフト ハイフンのスタイルを設定する方法がわからないことに気付きました。

このコードはハイフンを赤くする必要がありますが、もちろん、スパンのハイフンは単語を分割していないため、ブラウザには表示されません:

<style>
    .box{
        width:40px;
        background-color:yellow;
    }
    .hyphen{
        color:red;
    }
</style>

<div class="box">
    <p>aaaa&shy;bbbb<span class="hyphen">&shy;</span>cccc</p>
</div>

http://jsfiddle.net/5LazU/

それを行う方法はありますか？

4

1 に答える 1

1

質問の内容がやや不明確なので、別の解釈で説明します。

ブラウザーの自動ハイフネーション (プロパティの使用による) によって導入されたハイフンは、hyphens要素または疑似要素を構成しないため、個別のエンティティとして (つまり、周囲のテキストのスタイルとは異なる方法で) スタイルを設定することはできません。 .

HTML での SOFT HYPHEN 文字のスタイリングは別の問題であり、回答はブラウザーに依存します。&shy;答えは、SOFT HYPHEN の入力方法 (生の文字、参照、数値参照) には依存しません。DOMでは同じデータになるためです。質問のように。

ご質問のコードは、FirefoxやIEでは赤いハイフンが表示されますが、Chromeでは「bbbb」の後にハイフンが表示されていないので、コードはChromeでテストしたものと思われます。これはバグのようです: この要素は、ハイフンを挿入せずに直接改行できるものとして扱われます。

「ぶら下がり句読点」の問題は、まったく別のものです。ぶら下がり句読点のテクニックが引用符 (リンクされたドキュメントに含まれているもの) を意味する理由は、マークがテキストのセグメントの最初と最後に表示されるためです。ブラウザーが挿入するハイフンは異なります。重要なことは、ハイフンを挿入する前に、ブラウザーが 1 行に収まる文字数を分析することです (自動ハイフネーションのため、または SOFT HYPHEN を可視ハイフンとしてレンダリングした結果として)。ブラウザーが目的の API を提供しない限り、これを傍受する方法がどのようにあるのかわかりません。

于 2014-06-21T07:52:22.043 に答える