Kỹ thuật làm chữ hoa đầu dòng (Drop cap)

Drop cap là một trong những typography hay được dùng trong các tạp chí trên giấy cũng như các tạp chí điện tử. Nó thường được dùng ở đầu mỗi bài báo với font chữ lớn và màu sắc nổi trội. Theo quy luật nhìn của mắt nếu một đối tượng nổi bật hơn các đối tượng xung quanh, nhì nó sẽ có tác động mạnh tới thị giác của người quan sát. Chính vì lý do đó mà người ta vẫn thường dùng cách này cho các bài báo nổi bật cần sự chú ý cao.

Tuy nhiên trong khuôn khổ của lĩnh vực nghiên cứu chúng ta sẽ đi tìm hiểu một số kỹ thuật làm chữ hoa đầu dòng (Drop cap).

1. Cách thứ nhất

Đầu tiên chúng ta sẽ đi tìm hiểu cách làm Drop cap chính thống. Trong cách này chúng ta sẽ sử dụng đến kỹ thuật selectors trong CSS. cụ thể là chúng ta sẽ dùng đến thuộc tính :first-letter.

Ta có định dạng HTML:

<p>Lorem ipsum dolor sit amet consectetuer at et
Aenean ac dolor. Ligula nulla ac id pede sit consectetuer ipsum
malesuada convallis habitant. Neque at pellentesque pharetra Aenean
accumsan orci Proin leo tellus eu. Dictumst Integer ut adipiscing
porttitor dolor Morbi ut id lorem auctor. Massa tellus Morbi enim
tellus pede vel suscipit hac sapien Cras. Cursus velit hendrerit
lobortis elit elit sed ut In.</p>

Định dạng CSS:

p.pdropcap:first-letter {
  float: left;
  padding: 4px 8px 0 0;
  display: block;
  color: #336699;
  font: 60px/50px Georgia, Times, serif;
}

Kết quả hiển thị:

Lorem ipsum dolor sit amet consectetuer at et Aenean ac dolor. Ligula nulla ac id pede sit consectetuer ipsum malesuada convallis habitant. Neque at pellentesque pharetra Aenean accumsan orci Proin leo tellus eu. Dictumst Integer ut adipiscing porttitor dolor Morbi ut id lorem auctor. Massa tellus Morbi enim tellus pede vel suscipit hac sapien Cras. Cursus velit hendrerit lobortis elit elit sed ut In.

Chúng ta cần phải đặt class cho thẻ <p> nhằm mục đích phân biệt nó với các thẻ <p> khác trong trang. Trong trường hợp bạn không đặt class thì toàn bộ các ký tự đầu dòng của thẻ <p> trong trang sẽ hiển thị định dạng chữ hoa, mà điều đó thì không phải là điều mong muốn.

2. Cách thứ hai

Trong cách thứ hai này ta sẽ dùng thêm một thẻ <span> để bao ký tự chữ hoa ở đầu dòng

Định dạng HTML:

<p><span>N</span>orem ipsum dolor sit amet
consectetuer at et Aenean ac dolor. Ligula nulla ac id pede
sit consectetuer ipsum malesuada convallis habitant. Neque
at pellentesque pharetra Aenean accumsan orci Proin leo
tellus eu. Dictumst Integer ut adipiscing porttitor dolor Morbi
ut id lorem auctor. Massa tellus Morbi enim tellus pede vel
suscipit hac sapien Cras. Cursus velit hendrerit lobortis
elit elit sed ut In.</p>

Định dạng CSS:

.dropcap {
  float: left;
  padding: 4px 8px 0 0;
  display: block;
  color: #336699;
  font: 60px/50px Georgia, Times, serif;
}

Kết quả hiển thị:

Norem ipsum dolor sit amet consectetuer at et Aenean ac dolor. Ligula nulla ac id pede sit consectetuer ipsum malesuada convallis habitant. Neque at pellentesque pharetra Aenean accumsan orci Proin leo tellus eu. Dictumst Integer ut adipiscing porttitor dolor Morbi ut id lorem auctor. Massa tellus Morbi enim tellus pede vel suscipit hac sapien Cras. Cursus velit hendrerit lobortis elit elit sed ut In.

Cách này có một ưu điểm là ký tự hoa đó có thể đặt ở bất cứ đâu trong bài viết miễn là chúng ta thêm thẻ <span class=”dropcap”> vào ký tự mà ta muốn chuyển thành dang drop cap.

Để cho phong phú chúng ta cũng có thể thêm một số các thuộc tính như màu nền, màu chữ,… vào cho thêm sinh động. Ta có ví dụ như sau:

Ac dolor. Ligula nulla ac id pede sit consectetuer ipsum malesuada convallis habitant. Neque at pellentesque pharetra Aenean accumsan orci Proin leo tellus eu. Dictumst Integer ut adipiscing porttitor dolor Morbi ut id lorem auctor. Massa tellus Morbi enim tellus pede vel suscipit hac sapien Cras. Cursus velit hendrerit lobortis elit elit sed ut In.

Theo cssyeah