ควรขีดเส้นใต้ขัดแย้งกับข้อความที่สืบทอดมาหรือไม่

โมดูลตกแต่งข้อความของ CSS3 มีคุณสมบัติtext-underline-positionซึ่งระบุว่าขีดเส้นใต้ควรอยู่ในตำแหน่งด้านล่างข้อความทั้งหมด:

หรือต่ำกว่าเส้นฐานปล่อยให้ปะทะกับตัวคั่นข้อความ:

โอเคเราทุกคนรู้วิธีขีดเส้นใต้ควรใช้เป็นทางเลือกสุดท้าย แต่…หากคุณจะใช้มันเป็นวิธีที่พบบ่อยที่สุดในการทำมันได้อย่างไร อะไรคือข้อดีและข้อเสียของแต่ละสไตล์ขีดเส้นใต้?

บ่อยที่สุดคืออะไร

นักพิมพ์ดีดบางคนจะบอกว่าควรจะหลีกเลี่ยงการขีดเส้นใต้ด้วยกันและการขีดเส้นใต้นั้นเหมาะสำหรับใช้กับเครื่องพิมพ์ดีดหรือบนไฮเปอร์ลิงก์บนเว็บเท่านั้น อย่างไรก็ตามฉันจะเพิ่มความคิดสร้างสรรค์ที่เกี่ยวกับการเห็นโอกาสที่จะทำลายกฎในรูปแบบที่สร้างสรรค์ดังนั้นเท่าใดคุณให้คำแนะนำนี้ขึ้นอยู่กับคุณ

บนเว็บการวางให้อยู่ใต้เส้นฐานเป็นตัวคั่นที่ทับซ้อนกันนั้นพบได้บ่อยที่สุด แต่นี่เป็นเพียงเพราะนี่เป็นการแสดงผลเริ่มต้นสำหรับเบราว์เซอร์หลักเสมอจนถึงจุดนี้

บนเครื่องพิมพ์ดีดการขีดเส้นใต้ทับซ้อนทับกัน แต่แตกต่างกันเล็กน้อย: มันเป็นส่วนหนึ่งระหว่างสองตัวอย่าง ( ตัวอย่าง ) หากคุณดูที่เส้นฐานของตัวสืบทอดเช่นห่วงด้านล่างgหรือส่วนล่างของp(ในฟอนต์ serif) นั่นคือตำแหน่งที่ขีดเส้นใต้อยู่ ดังนั้นจึง "เชื่อมต่อกับ" ด้านล่างของผู้สืบทอด

ข้อดีและข้อเสีย

ประโยชน์ที่จะได้รับการขีดเส้นใต้กับเหลื่อมของคุณคือมันไม่ได้ส่งผลกระทบต่อระยะห่างบรรทัดของคุณ (หรือ "นำ") เลย - คุณไม่จำเป็นต้องเพิ่มช่องว่างระหว่างบรรทัดเพื่อรองรับขีดเส้นใต้

ประโยชน์ที่จะได้รับอย่างชัดเจนจากผู้สืบทอดของคุณคือความสามารถในการอ่านหากเป็นสิ่งสำคัญ แต่คุณจะมีข้อเสียเปรียบในการเพิ่มระยะห่างระหว่างบรรทัด หากสถานการณ์ของคุณอนุญาตให้มีระยะห่างระหว่างบรรทัดจำนวนมากแล้วโดยทั้งหมดไปให้มัน

หากคุณกำลังใช้งานเว็บการขีดเส้นใต้จะเชื่อมโยงกับไฮเปอร์ลิงก์อย่างมาก ดังนั้นการใช้การขีดเส้นใต้ใด ๆ ควรหลีกเลี่ยงข้อความที่ไม่ได้เป็นส่วนหนึ่งของลิงค์ มีความหมายว่าสิ่งที่คุณต้องการที่จะมีความหมายในรูปแบบอื่น ๆ - ใช้ตัวหนา , ตัวเอียงหรือทั้งหมด CAPS แทน

มันเป็นความเชื่อของฉันว่าโดยทั่วไปแล้วข้อความที่ขีดเส้นใต้ใด ๆ จึงน้อยกว่าความแตกต่างนั้นไม่มีอยู่สำหรับผู้อ่าน นี่เป็นหนึ่งในสิ่งที่นักออกแบบสามารถใส่ใจได้เป็นอย่างมากแต่ผู้อ่านไม่เคยทำ ทุกอย่างเป็นทางเลือกของโวหารในความคิดของฉัน

ฉันชอบการวางตำแหน่งพื้นฐานโดยมีตัวแบ่งที่ตัวแบ่ง: นั่นคือtext-decoration-skip: ink;ปัจจุบันยังไม่ได้รับการสนับสนุน ฉันได้ไปไกลถึงสองชั้นและเพิ่มช่วงเพื่อสืบทอดเพื่อลบขีดเส้นใต้ออกจากพวกเขา (ข้อความแทนที่ด้วย php ดังนั้นจึงไม่สามารถสร้างรหัสได้มากมาย)

ฉันจะไม่ใช้เคล็ดลับเส้นขอบด้านล่าง (หรือแอตทริบิวต์ด้านล่าง) เนื่องจากการชดเชย ฉันพบว่าผู้อ่านของฉันค่าชดเชยของการขีดเส้นใต้นั้นอยู่ห่างไกลและเบี่ยงเบนความสนใจของพวกเขามากกว่าสิ่งใด

ฉันลองและเปลี่ยนเป็นตัวหนาตัวเอียงตัวเอียงหนาหรือสีต่างๆแทนที่จะขีดเส้นใต้เมื่อใดก็ตามที่เป็นไปได้

คำอธิบายtext-decoration: underlineใน CSS 2.1 สเปคกำหนดผลกระทบเช่นเดียวกับการขีดเส้นใต้โดยไม่มีรายละเอียด แต่เบราว์เซอร์จะใช้มันเป็นเพียงเล็ก ๆ น้อย ๆ ที่ปรากฏด้านล่างพื้นฐาน ดังนั้นจึงมักจะลดการสืบทอด (และเครื่องหมายกำกับเสียงวางอยู่ใต้จดหมาย)

ในข้อความร่าง CSS3 นั้นมีtext-underline-positionตำแหน่ง แต่ดูเหมือนว่าเบราว์เซอร์ใด ๆ จะไม่รองรับ (ตามข้อมูล css666.comสนับสนุนโดย IE แต่อย่างน้อยใน IE 9 การสนับสนุนดูเหมือนจะถูก จำกัด ให้ตระหนักถึงคุณสมบัติและยอมรับค่าเป็นค่าautoเริ่มต้น - ดังนั้นจึงไม่สนับสนุนจริง ๆ ) อัปเดต : จริง ๆ แล้ว , IE (จากรุ่น 6) มีการสนับสนุนเพิ่มขึ้นเล็กน้อยแต่มันช่วยให้คุณวางขีดเส้นใต้ไว้เหนือข้อความ (!) และไม่อยู่ด้านล่าง

ดังที่อธิบายไว้ในคำตอบของสกอตต์และความคิดเห็นของ Joonas คุณสามารถใช้เส้นขอบด้านล่างเพื่อจำลองขีดเส้นใต้แล้วคุณสามารถควบคุมสไตล์“ ขีดเส้นใต้” ได้ค่อนข้างดี สิ่งนี้อาจเหมาะสมเช่นลิงก์ที่ขีดเส้นใต้ที่ยืนอยู่บนตัวเองไม่ใช่อินไลน์ สำหรับข้อความแบบอินไลน์ที่คุณอาจต้องการขีดเส้นใต้เช่นเนื่องจากคุณเป็นสิ่งพิมพ์ HTML-izing ที่มีการขีดเส้นใต้การขีดเส้นใต้ CSS ปกติน่าจะดีกว่า - เนื่องจากการขีดเส้นใต้สอดคล้องกับประเพณีของการพิมพ์มากหรือน้อย