Drop cap คือตัวอักษรตัวแรกในบล็อคข้อความ โดยปกติแล้ว Drop Caps จะใช้ในย่อหน้านำของเอกสาร เช่น ย่อหน้านี้ที่คุณกำลังอ่านอยู่ ตัวพิมพ์ใหญ่มีรูปแบบที่แตกต่างจากข้อความที่เหลือเพื่อให้โดดเด่น ดรอปแคปคือสัญลักษณ์แสดงภาพที่ทรงพลังซึ่งนักพิมพ์ดีดและนักออกแบบภาพใช้เพื่อดึงดูดความสนใจของผู้คนในที่ที่ต้องการอย่างแท้จริง
ไม่มีทางเดียวที่จะออกแบบดรอปแคปได้ วิธีที่ใช้กันทั่วไปมากที่สุดในการใช้ตัวพิมพ์ใหญ่คือการใช้แบบอักษร/แบบอักษรเดียวกันกับส่วนอื่นๆ ของข้อความในเนื้อหา แต่ทำให้ขนาดแบบอักษรของตัวอักษรตัวแรกมีขนาดใหญ่ขึ้นอย่างมาก และบางครั้งก็โดดเด่นยิ่งขึ้น
ฉันใช้โค้ดต่อไปนี้เพื่อใส่สไตล์เฉพาะบนดรอปแคปที่ใช้ในย่อหน้านำของบทความนี้:
.dropcap {
float: left;
font-size: 6em;
line-height: 0.60;
margin: 0;
margin-left: -0.04em;
padding: .09em .04em 0em 0em;
}
หากต้องการใช้ในย่อหน้า ให้ใส่ตัวอักษรตัวแรกของคำแรกในย่อหน้าลงใน <span และกำหนดแอตทริบิวต์คลาสของ dropcap เช่นนี้:
<p><span class="dropcap">D</span>rop cap is the first letter in a text block...
</p>ระวังว่าวิธีจัดรูปแบบ drop cap ด้วย CSS สำหรับ your เฉพาะเอกสารขึ้นอยู่กับ โดยสมบูรณ์ บนโครงสร้างทางกายวิภาคของแบบอักษรที่คุณเลือก ขนาดแบบอักษร ความสูงของบรรทัด (นำหน้า) และปัจจัยอื่นๆ ไม่มีชุดกฎ CSS ใดที่จะครอบคลุมทุกความต้องการของคุณ ดังนั้นคุณจะต้องเลื่อนขั้นไปสู่ผลลัพธ์ที่ดี
คุณสามารถใช้ CSS ด้านบนเป็นเทมเพลต/จุดเริ่มต้น แล้วลองเพิ่ม/ลด font-size คุณสมบัติของ drop cap เพื่อให้พอดีกับย่อหน้าของคุณ หากคุณยังไม่สามารถจัดวาง drop cap ได้ตามต้องการ ให้ลองปรับ line-height มูลค่าทรัพย์สินขึ้นหรือลงเล็กน้อย สุดท้าย คุณอาจต้องเล่นกับ margin-top คุณสมบัติ เพื่อเลื่อนฝาขึ้นหรือลงเล็กน้อย
รูปแบบการดร็อปแคป
สไตล์เฉพาะที่ฉันเลือกสำหรับดรอปแคปเป็นเพียงหนึ่งในหลายๆ รูปแบบ ไม่มีกฎเกณฑ์ใดที่ดรอปแคปต้องจัดตำแหน่งบนล่างเท่าๆ กันกับข้อความที่เหลือของย่อหน้า นักออกแบบบางคนจะยก drop cap ขึ้นเหนือระดับบนของบรรทัดแรกเล็กน้อย — คนอื่นๆ จะยกมัน อย่างมีนัยสำคัญ บางคนจะทำตรงกันข้ามและใส่ฝาปิดแบบหล่นลงในบล็อกข้อความ ทำให้เกิดช่องว่างมากมายที่ด้านบนและด้านซ้ายของข้อความ
บางครั้งตัวพิมพ์ใหญ่ใช้ข้อความและ/หรือสีพื้นหลังต่างกัน
ตัวพิมพ์ใหญ่ที่มีสีข้อความต่างกัน
Lorem ipsum หรือ lipum อย่างที่รู้จักกันในบางครั้ง เป็นข้อความจำลองที่ใช้ในการจัดวางงานพิมพ์ กราฟิก หรือการออกแบบเว็บ ข้อความนี้มาจากผู้เรียงพิมพ์ที่ไม่รู้จักในศตวรรษที่ 15 ซึ่งคิดว่ามีชิ้นส่วนของ De Finibus Bonorum et Malorum ของ Cicero ที่มีสัญญาณรบกวนเพื่อใช้ในหนังสือตัวอย่างประเภท
Drop cap with different background-color
Lorem ipsum หรือ lipum อย่างที่รู้จักกันในบางครั้ง เป็นข้อความจำลองที่ใช้ในการจัดวางงานพิมพ์ กราฟิก หรือการออกแบบเว็บ ข้อความนี้มาจากผู้เรียงพิมพ์ที่ไม่รู้จักในศตวรรษที่ 15 ซึ่งคิดว่ามีชิ้นส่วนของ De Finibus Bonorum et Malorum ของ Cicero ที่มีสัญญาณรบกวนเพื่อใช้ในหนังสือตัวอย่าง
สองตัวอย่างข้างต้นใช้ CSS เดียวกันกับคลาส drop cap ที่ฉันให้ไว้ก่อนหน้านี้ ยกเว้นว่าพวกเขาใช้สี/สีพื้นหลังที่ต่างกัน ฉันยังเพิ่ม padding-bottom และ margin-right เล็กน้อยในตัวอย่างที่สองเพื่อ nudge เข้าที่
-
ดรอปแคปเป็นเพียงเครื่องมือเน้นการพิมพ์จำนวนมาก แต่เป็นเครื่องมือที่ดึงดูดความสนใจมากที่สุดชนิดหนึ่ง ดังนั้นโปรดใช้อย่างระมัดระวัง
