CSS :: first-letterとUTF-8 mb4との互換性

Question

私の問題は次のとおりです。私はいくつかの投稿があるウェブサイトを作成しています。これらの記事では、「:: first-letter」の強調表示をしてより大きなものにし、それは完全に機能します。

しかし、UTF-8 mb4（2 Unicode Chars）のUnicode Emoticonとして最初の文字でポストをロードしようとすると、1つのcharを2つの区切りとしてロードしようとすると失敗します。結果は奇妙なものです。

これはスクリーンショットです：私は同じ顔文字で記事を作成したので、あなたが見ることができ、そこに大きな文字と未知の小さい方だし、同じ絵文字が見えどのように

2回書いた。

.first_letter_post::first-letter { 
 
    float: left; 
 
    padding-right: 20px; 
 
    padding-top: 0px; 
 
    margin-bottom: -15px; 
 
    margin-top: -10px; 
 
    font-size: 50px; 
 
    font-weight: bold; 
 
    text-transform: uppercase; 
 
}

<p class="first_letter_post">foobar</p>

これは文字です、と私はGoogle Chromeを使用しています。

私は誰かがこれを手伝ってくれることを願っています。

Answer 1

Chromeには、ユニコードの問題の長い歴史があります。[bug]この問題は、これらの問題の組み合わせです。

1. 3バイトを超えるシンボルを正しく認識できない。かかわらず、これは離れて単一の記号を引き裂くクロムになる文字部

という

スタイリングシンボル。

IEは、複数のコードポイントで構成されるユニコードシンボルを正しく認識しており、にのみ::first-letterを適用する必要があるという仕様にかかわらずスタイリングを適用します。

Firefoxは仕様に非常に厳しく、非文字単位にスタイルを適用しません。私は英数字補完スペースをletter as wellとして扱うべきかどうか判断できませんでしたが、Firefoxはそれをそのまま扱っていません。

これは、あなたが頼りにしているときに、その文字が現れる可能性があることを知っているときは、::first-letterを使用しないことを意味します。

考えられる解決策は、javascriptを使用して最初の文字を手動で検出し、それをタグにラップしてスタイルを適用することです。私の解決策は、ハードコードされた16進値のためにちょっと乱雑ですが、十分かもしれません。

// manually wrapping the "first character" 
 
Array.prototype.forEach.call(document.querySelectorAll("div"),function(el){wrapFirstChar(el)}); 
 

 
function wrapFirstChar(div){ 
 
    let content = div.innerHTML,chars=content.charCodeAt(0) >= 55349?2:1; 
 
    div.innerHTML = "<span>"+content.substring(0,chars)+"</span>"+content.substring(chars); 
 
} 
 

 
// this is what javascript sees at the first two positions of the string 
 
//Array.prototype.forEach.call(document.querySelectorAll("p"),(e)=>console.log(e.innerHTML.charCodeAt(0)+"+"+e.innerHTML.charCodeAt(1)));

p::first-letter { 
 
    font-weight: bold; 
 
    color:red; 
 
} 
 
span { 
 
    font-weight: bold; 
 
    color:blue; 
 
} 
 
p{ 
 
margin:0; 
 
}

<h2>using ::first-letter</h2> 
 
<p> 4 bytes symbol</p> 
 
<p> Enclosed Alphanumeric Supplement 1F170</p> 
 
<p> Mathematical Alphanumeric Symbols 1D7B9</p> 
 
<p> Arabic Mathematical Alphabetic Symbols 1EE00</p> 
 
<p>a normal character (1 byte)</p> 
 

 
<h2>manually replaced</h2> 
 
<div> 4 bytes symbol</div> 
 
<div> Enclosed Alphanumeric Supplement 1F170</div> 
 
<div> Mathematical Alphanumeric Symbols 1D7B9</div> 
 
<div> Arabic Mathematical Alphabetic Symbols 1EE00</div> 
 
<div>a normal character (1 byte)</div>