Drop cap = ตัวอักษรแรกใน text block มักใช้ใน lead paragraph ของ document เช่น paragraph นี้ Drop caps styled ต่างจาก text อื่นเพื่อ stand out Drop cap = powerful visual marker ที่ typographers/visual designers ใช้ดึง attention ไปที่พวกเขาอยากให้
ไม่มี one way to design drop caps Common approach: ใช้ font/typeface เดียวกับ body text แต่ font size ตัวแรกใหญ่กว่ามาก บางครั้ง bolder
Code สำหรับ drop cap style ใน lead paragraph นี้:
.dropcap { float: left; font-size: 6em; line-height: 0.60; margin: 0; margin-left: -0.04em; padding: .09em .04em 0em 0em; }ใช้ใน paragraph: wrap ตัวอักษรแรกของคำแรกใน paragraph ด้วย <span element class dropcap:
<p><span class="dropcap">D</span>rop cap is the first letter in a text block... </p>ระวัง: วิธี style drop cap ด้วย CSS สำหรับ document ของคุณ ขึ้นอยู่ สมบูรณ์ กับ typeface anatomical structure, font size, line height (leading), และ factors อื่นๆ ไม่มี one CSS rule-set ครอบคลุมทุกความต้องการ ต้อง nudge ไปเรื่อยๆ จนพอใจ
ใช้ CSS ข้างต้นเป็น template/starting point แล้วเล่นเพิ่ม/ลด font-size ของ drop cap ให้ fit paragraph ถ้ายัง align ไม่เป็นลองปรับ line-height property value ขึ้น/ลงเล็กน้อย สุดท้ายอาจต้อง adjust margin-top เล็กน้อย
Drop Cap Styles
Styling ที่เลือกแค่หนึ่งในหลายแบบ ไม่มี rule ว่า drop cap ต้อง align top-bottom เท่ากับ paragraph text บาง designers ยก drop cap ขึ้นเหนือ first line's ascender บางคนยก significantly บางคนทำตรงข้าม tuck drop cap ลึกใน text block สร้าง whitespace เยอะ top และ left
บางครั้ง drop caps ใช้ text และ/หรือ background color ต่างกัน
Drop Cap กับ 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 กับ 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.
ตัวอย่างทั้งสองใช้ CSS เดียวกับ drop cap class ก่อนหน้า แตะ text color/background-color ต่างกัน เพิ่ม padding-bottom และ margin-right ให้ตัวที่สอง nudge ให้พอดี
-
Drop cap = หนึ่งในหลาย typographic emphasis tools แตะหนึ่งใน attention-grabbing สุด ใช้ใน moderation
