Drop Caps trong CSS sử dụng chữ cái đầu tiên và chữ cái đầu

---

Chữ viết đầu dòng đã được sử dụng trong một thời gian dài với các phương tiện in ấn để tạo sự chỉnh chu cho chữ cái đầu tiên của đoạn đầu tiên của một phần hoặc chương. Những chữ viết hoa này giúp thu hút sự chú ý và lôi cuốn người đọc, và thường là dịp tốt để sử dụng một phông chữ rất cách điệu vì nó chỉ được áp dụng trên một chữ cái nên sẽ không ảnh hưởng đến khả năng đọc của văn bản. Hiệu ứng drop cap tương tự có thể được thực hiện với CSS bằng cách sử dụng phần tử giả chữ cái đầu tiên :: và thuộc tính chữ cái đầu tiên mới.

:: Bộ chọn phần tử giả chữ cái đầu tiên

:: first-letter là một công cụ chọn phần tử giả tương tự như :: before và :: after có hiệu quả làm cho chữ cái đầu tiên của một phần tử có thể tạo kiểu như thể nó là phần tử riêng biệt của chính nó, tất cả mà không cần phải thêm bất kỳ đánh dấu bổ sung nào vào các trang web .

Dưới đây là một ví dụ đơn giản mà ta định kiểu chữ cái đầu tiên của đoạn văn đầu tiên hoặc các phần tử của bài viết :

article p:first-child::first-letter {
  color: hotpink;
  padding: 0 .3rem;
  margin: 0 .3rem 0 0;
  border: 2px solid;
  border-radius: 8px;
  font-family: "IBM Plex Mono", monospace;
}

Và với điều này, ta nhận được một cái gì đó giống như sau:

---

Tuy nhiên, có rắc rối ở thiên đường. Hãy xem điều gì sẽ xảy ra nếu ta cho kích thước phông chữ lớn hơn; một trong những tính năng chính của mũ thả điển hình:

article p:first-child::first-letter {
  color: hotpink;
  padding: 0 .3rem;
  margin: 0 .3rem 0 0;
  border: 2px solid;
  border-radius: 8px;
  font-family: "IBM Plex Mono";

  font-size: 4rem;
  line-height: 1;
}

Ngoài việc sử dụng kích thước phông chữ lớn hơn, ta cũng đặt giá trị thấp cho chiều cao dòng để chiều cao dòng của dòng đầu tiên không bị ảnh hưởng bởi chiều cao dòng đầu tiên của chữ cái đầu tiên này với phông chữ lớn hơn. Vấn đề là drop cap không giảm chính xác. Một giải pháp là sử dụng phao cũ còn tốt:

article p:first-child::first-letter {
  color: hotpink;
  padding: 0 .3rem;
  margin: 0 .3rem 0 0;
  border: 2px solid;
  border-radius: 8px;
  font-family: "IBM Plex Mono", monospace;

  font-size: 4rem;
  float: left;
  line-height: 1;
}

Hỗ trợ trình duyệt cho :: chữ cái đầu tiên khá phổ biến.

Thuộc tính ký tự đầu tiên

Một giải pháp thay thế cho việc sử dụng float cùng với chiều cao dòng và kích thước phông chữ để tạo kiểu đúng cách cho các mũ thả là sử dụng thuộc tính chữ cái đầu mới, thuộc tính này mong đợi một giá trị số đại diện cho số dòng mà nắp thả phải mở rộng. Sau đó, trình duyệt sẽ tự động tính toán kích thước phông chữ thích hợp:

article p:first-child::first-letter {
  color: hotpink;
  padding-right: 8px;

  -webkit-initial-letter: 3;
  initial-letter: 3;
}

Tại thời điểm viết bài này, bản demo cuối cùng này sẽ chỉ hoạt động như mong đợi trong Safari. Không giống như với :: chữ cái đầu tiên, không may là sự hỗ trợ cho chữ cái đầu tiên gần như không tồn tại vào lúc này. Vì vậy, bây giờ ta sẽ phải tiếp tục sử dụng phao trong một thời gian ngắn. Nếu bạn vẫn muốn sử dụng ký tự đầu tiên, có thể bạn cần sử dụng nó với @supports at-rule để drop cap trông không quá kỳ quặc trong các trình duyệt không hỗ trợ.

---

---

Các tin liên quan

image đường viền và đường viền Gradient trong CSS thuần túy
2020-09-03
Cắt image trong CSS với đối tượng phù hợp
2020-09-03
Inline so với Inline-Block Display trong CSS
2020-09-03
CSS Grid: Hợp lý và Căn chỉnh
2020-09-03
Bố cục lưới CSS: Đơn vị Fr
2020-09-03
Giới thiệu về Clipping Sử dụng clip-path trong CSS
2020-09-03
Tùy chỉnh gạch chân với trang trí văn bản trong CSS
2020-09-03
Giải thích về đơn vị CSS
2020-09-03
Cải thiện khả năng phản hồi bằng cách bọc linh hoạt trong CSS
2020-09-03
Thuộc tính khoảng trắng CSS
2020-09-03