Khả năng tương thích về CSS :: chữ cái đầu tiên và UTF-8 mb4

Question

Vì vậy, đây là vấn đề của tôi: Tôi đang tạo trang web nơi tôi đã đăng một số bài đăng. Trong những bài viết đó, tôi đặt một chữ ":: first-letter" để làm cho nó to hơn, và nó hoạt động hoàn hảo.

Tuy nhiên, khi tôi tải một bài đăng có chữ cái đầu tiên dưới dạng Biểu tượng cảm xúc Unicode là UTF-8 mb4 (2 Unicode Chars), nó không thành công, bằng cách cố gắng tải char đơn thành 2 tách biệt, vì vậy kết quả là điều gì đó kỳ lạ.

Đây là một ảnh chụp màn hình:

Làm thế nào bạn có thể thấy, có một lá thư lớn hơn và nhỏ hơn mà không rõ, và sau đó là biểu tượng cảm xúc tương tự có thể nhìn thấy, bởi vì tôi đã tạo ra một bài với biểu tượng cảm xúc tương tự đã viết xuống 2 lần.

.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>

Đây là nhân vật:, và tôi đang sử dụng Google Chrome.

Tôi hy vọng ai đó có thể giúp tôi với điều này.

Answer 1

Chrome có lịch sử lâu đời về các vấn đề với unicode [bug]. Sự cố này là sự kết hợp của những vấn đề đó:

1. Không nhận dạng chính xác các biểu tượng có nhiều hơn 3 byte.
2. Ký hiệu kiểu dáng bất kể là đơn vị chữ cái

Kết quả này trong Chrome xé một biểu tượng riêng biệt.

IE nhận dạng chính xác các ký hiệu unicode bao gồm nhiều điểm mã và áp dụng kiểu dáng bất kể thông số chỉ ra rằng ::first-letter chỉ được áp dụng cho typographic letter units.

Firefox hoạt động rất nghiêm ngặt đối với thông số kỹ thuật, không áp dụng kiểu cho các đơn vị không phải chữ cái. Tôi không thể xác định liệu không gian bổ sung chữ và số nên được coi là letter as well, nhưng Firefox không xử lý chúng như vậy.

Điều này có nghĩa là bạn nên hạn chế sử dụng ::first-letter khi bạn chủ yếu dựa vào nó và biết rằng những nhân vật đó có thể xảy ra.

Một giải pháp có thể tôi có thể nghĩ đến, là tự phát hiện ký tự đầu tiên thông qua javascript và gói nó trong thẻ và sau đó áp dụng các kiểu. Giải pháp của tôi hơi lộn xộn do giá trị hex được mã hóa cứng, nhưng nó có thể là đủ.

// 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>