ค่าของหน่วย css 'ex' คืออะไร?

(เพื่อไม่ให้สับสนกับXunitซึ่งเป็นไลบรารีการทดสอบหน่วย. Net ยอดนิยม)

วันนี้ด้วยความเบื่อหน่ายฉันเริ่มตรวจสอบ Gmails DOM (ใช่ฉันเบื่อมาก)

ทุกอย่างดูตรงไปตรงมาจนกระทั่งฉันสังเกตเห็นข้อกำหนดที่น่าสนใจเกี่ยวกับความกว้างขององค์ประกอบบางอย่าง Googlites ที่มีชื่อเสียงได้ระบุจำนวนตาราง Cols โดยใช้หน่วย 'ex' ที่หายาก

width: 22ex;

ตอนแรกฉันนิ่งงัน ("อะไรคือ 'แฟนเก่า'? จากข้อมูลจำเพาะ CSS3 :

[ หน่วยอดีตคือ] เท่ากับที่ใช้ x ความสูงของตัวอักษรที่มีอยู่ครั้งแรก x-height ถูกเรียกเช่นนี้เพราะมักจะเท่ากับความสูงของตัวพิมพ์เล็ก "x" อย่างไรก็ตามมีการกำหนด "ex" ไว้สำหรับแบบอักษรที่ไม่มี "x"

ดีและดี แต่ฉันไม่เคยเห็นมันใช้มาก่อน (ใช้น้อยกว่ามาก) ฉันใช้ ems ค่อนข้างบ่อยและเห็นคุณค่าของมัน แต่ทำไม "อดีต"? ดูเหมือนมาตรฐานการวัดน้อยกว่า em มากและมีประโยชน์น้อยกว่ามาก

หนึ่งในไม่กี่หน้าผมพบว่าการอภิปรายหัวข้อนี้เป็นสตีเฟ่น Poley ของhttp://www.xs4all.nl/~sbpoley/webmatters/emex.html Stephen ให้ประเด็นที่ดีอย่างไรก็ตามการสนทนาของเขาดูเหมือนจะสรุปไม่ได้สำหรับฉัน

คำถามของฉันคือ: หน่วย 'ex' ให้คุณค่าอะไรกับการออกแบบเว็บ?

(คำถามนี้สามารถติดแท็กอัตนัยได้ แต่ฉันจะทิ้งการตัดสินใจนั้นให้ SO'ers ที่มีประสบการณ์มากกว่าตัวฉันเอง)

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

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

ดังที่โจนาธานชี้ให้เห็นในความคิดเห็น ex เป็นเพียงเวอร์ชันความสูงของ em (ความกว้าง)

ในการตอบคำถามให้ใช้ตัวยกและตัวห้อย ตัวอย่าง:

sup {
    font-size: 75%;
    height: 0;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
    bottom: 1ex;
}

สิ่งที่ควรพิจารณาอีกประการหนึ่งคือการปรับขนาดหน้าเว็บของคุณเมื่อผู้ใช้อัพหรือดาวน์ขนาดตัวอักษร (อาจใช้ ctrl + mouse wheel (windows))

ฉันใช้ em กับ .. padding-left: 2 em; padding-right: 2 em;

และ ex พร้อม padding-bottom: 2 ex; padding-top: 2 เช่น;

ดังนั้นจึงใช้หน่วยวัดแนวตั้งสำหรับคุณสมบัติมาตราส่วนในแนวตั้งและหน่วยวัดแนวนอนสำหรับคุณสมบัติมาตราส่วนแนวนอน

ค่าของการมีอยู่ในข้อมูลจำเพาะของ CSSหากเป็นสิ่งที่คุณต้องการจริงๆจะเหมือนกับค่าของการมีหน่วย em

ช่วยให้คุณสามารถตั้งค่าแบบอักษรเป็นขนาดที่สัมพันธ์กันได้

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

ทราบว่าคำเช่น "เดี่ยว / คู่สายระยะห่าง" จริงหมายถึงชดเชยระหว่างสองสายที่อยู่ติดกันโดยวัดจากอีเอ็ม ดังนั้น "สองบรรทัดระยะห่าง" หมายความว่าแต่ละบรรทัดมีความสูง 2 em

ดังนั้นหากคุณต้องการระบุระยะทางแนวตั้งที่เป็นสัดส่วนกับ "เส้น" ให้ใช้ em ใช้เฉพาะในกรณีที่คุณต้องการความสูงจริงของตัวอักษรพิมพ์เล็กซึ่งผมกล้าพูดได้ว่าเป็นตัวอย่างที่หายากกว่ามาก

อัปเดต: มาตรฐานเว็บอนุญาตให้เบราว์เซอร์ใช้ 0.5em เป็น ex หรือมาจากฟอนต์

อย่างไรก็ตามไม่มีวิธีใดที่จะฝังข้อมูล "x-height" ในฟอนต์ได้อย่างน่าเชื่อถือ (OpenType หรือ webfont)

ดังนั้นความเป็นไปได้ในอดีตทำให้อดีตหน่วยงานซ้ำซ้อนและหลังขาดวิธีการที่เชื่อถือได้ที่จะเกิดขึ้น และความจริงที่ว่าอย่างใดอย่างหนึ่งเป็นไปได้ทำให้ความน่าเชื่อถือน้อยลง

ดังนั้นฉันจึงโต้แย้งเรื่องการขาดมูลค่าของหน่วยอดีต