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à khi thiết kế website 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 class="pdropcap">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 class="pdropcap"> 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 class="dropcap"> để bao ký tự chữ hoa ở đầu dòng

Định dạng HTML:

<p><span class="pdropcap">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.