Drop cap là chữ cái đầu tiên trong text block. Drop caps thường dùng ở lead paragraph của document, như paragraph bạn đang đọc ngay bây giờ. Drop caps được style khác biệt với phần text còn lại để làm nổi bật. Drop cap là visual marker mạnh mẽ mà typographers và visual designers dùng để kéo attention người đọc chính xác nơi họ muốn.
Không có one way thiết kế drop caps. Cách phổ biến nhất dùng drop caps là dùng cùng font/typeface với body text, nhưng làm font size trên chữ cái đầu lớn hơn đáng kể, đôi khi bolder.
Tôi dùng code sau để đạt style cụ thể trên drop cap dùng trong lead paragraph bài này:
.dropcap { float: left; font-size: 6em; line-height: 0.60; margin: 0; margin-left: -0.04em; padding: .09em .04em 0em 0em; }Để dùng trong paragraph, chỉ cần wrap chữ cái đầu của từ đầu tiên trong paragraph trong element <span và cho class attribute dropcap, như sau:
<p><span class="dropcap">D</span>rop cap is the first letter in a text block... </p>Lưu ý: cách style drop cap với CSS cho cụ thể document của bạn, phụ thuộc hoàn toàn vào anatomical structure của typeface bạn chọn, font size, line height (leading), và factors khác. Không có one CSS rule-set cover all needs, nên bạn phải nudge đường đến kết quả tốt.
Bạn có thể dùng CSS trên làm template/starting point rồi chơi tăng/giảm property font-size của drop cap để fit paragraph just right. Nếu vẫn không align như ý, thử adjust line-height property value nhẹ lên/xuống. Cuối cùng, có thể cần chơi với margin-top property, để nhẹ nhàng move drop cap lên/xuống.
Drop cap styles
Specific styling tôi chọn cho drop cap chỉ là một trong nhiều. Không có rule drop cap phải align equally top-bottom với text còn lại của paragraph. Một số designers raise drop cap chút above first line's ascender — những người khác raise significantly. Số khác làm ngược lại, tuck drop cap deep vào text block, tạo nhiều whitespace top và left.
Đôi khi drop caps dùng khác text, và/hoặc background color.
Drop cap với khác text color
L orem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
Drop cap với khác background-color
L orem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
Hai ví dụ trên dùng cùng CSS với drop cap class tôi cung cấp trước, trừ dùng khác color/background-color. Tôi cũng thêm padding-bottom và margin-right cho ví dụ thứ hai để nudge nó vào vị trí.
-
Drop cap chỉ là một trong nhiều typographic emphasis tools, nhưng là một trong những attention-grabbing nhất — nên dùng moderation.