วิชาการพิมพ์ของเหลว: ทำความเข้าใจว่ามันคืออะไร ทำไม และใช้งานอย่างไร

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

ในบทความนี้ เราจะตรวจสอบการพิมพ์แบบไหล วิธีการทำงาน และวิธีใช้งานบน WordPress

Fluid Typography คืออะไร?

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

การพิมพ์แบบไหลกับการพิมพ์แบบตอบสนองแบบดั้งเดิม

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

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

การสนับสนุน WordPress 24/7

จากผู้เชี่ยวชาญ WordPress ตัวจริง

เรียนรู้เพิ่มเติม

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

การพิมพ์ของไหลทำงานอย่างไร

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

CSS Clamp Function

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

คำสั่งหนีบมีลักษณะดังนี้:

แคลมป์ ( ขั้นต่ำ , ที่ต้องการ , สูงสุด );

มาดูกันว่ามันทำงานอย่างไรกับขนาดตัวอักษร:

ที่หนีบ (1.5rem, 2vw + 1rem, 2.25rem);

สังเกตว่าเรากำลังใช้ค่า rem สำหรับค่าต่ำสุดและสูงสุด ค่า Rem สามารถเข้าถึงได้มากขึ้น หากมีคนซูมเบราว์เซอร์เพื่อเพิ่มขนาดตัวอักษร การพิมพ์แบบไหลควรปรับตามนั้นและดีกว่าถ้าคุณระบุค่าเป็นพิกเซล

ค่าที่ต้องการคือการคำนวณ “vw” ย่อมาจากวิวพอร์ต ดังนั้น 2vw คือ 2% ของความกว้างของวิวพอร์ต

ด้วยขนาดฟอนต์รูท 16px และความกว้างวิวพอร์ต 800px ขนาดข้อความที่เราต้องการคือ 32 พิกเซลหรือ 2 rem

800px x .02 = 16 พิกเซล (หรือ 1 rem)

1 rem + 1 rem = 2 rem (หรือ 32 พิกเซล)

ไม่ต้องกังวล. คุณไม่จำเป็นต้องทำคณิตศาสตร์ ฟังก์ชัน CSS จะดูแลคุณเอง

คุณยังไม่ต้องแยกแยะทักษะพีชคณิตของคุณเมื่อเขียนสไตล์ชีตของคุณ ลองใช้เครื่องมืออย่างเช่น เครื่องมือ แก้ไขตัวพิมพ์ของเหลวสมัยใหม่ เพื่อสร้างข้อความสั่งหนีบสำหรับคุณ

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

ข้อควรพิจารณาเมื่อใช้ Fluid Typography

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

เมื่อใดควรใช้ Fluid Typography

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

เมื่อไม่ใช้ของเหลว Typography

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

ตั้งค่าทางเลือกเสมอ

อย่าลืมว่าทุกครั้งที่คุณใช้การพิมพ์แบบไหล ให้รวมค่าทางเลือกไว้เสมอในกรณีที่เบราว์เซอร์ไม่รองรับฟังก์ชันแคลมป์ เบราว์เซอร์ที่ทันสมัยทั้งหมดสนับสนุนฟังก์ชันหนีบ แต่ค่าทางเลือกให้ความปลอดภัยเป็นพิเศษในกรณีที่ยังคงมีการระงับ Internet Explorer ที่ดื้อรั้น

วิชาการพิมพ์ของเหลวใน WordPress

เพิ่มการรองรับการพิมพ์แบบไหลใน Gutenberg 13.8 และจะรวมอยู่ใน WordPress 6.1 คุณลักษณะการพิมพ์แบบไหลปลดล็อกความสามารถสำหรับผู้สร้างธีมเพื่อกำหนดขนาดฟอนต์ที่ปรับขนาดได้ในไฟล์ theme.json

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

การใช้การพิมพ์แบบไหลบน WordPress นั้นง่ายที่สุดในระดับธีม หากคุณสร้างธีมของคุณเอง ให้ดาวน์โหลดปลั๊กอิน Gutenberg และเริ่มการทดสอบ หากการสร้างธีมของคุณเองหรือการเขียนสไตล์ชีตการพิมพ์แบบไหลนั้นเกินทักษะทางเทคนิคของคุณเล็กน้อย ก็ไม่ต้องกังวล เฉกเช่นธีมอื่นๆ ที่โอบล้อมบล็อกและการแก้ไขไซต์แบบเต็ม คุณสามารถคาดหวังให้การพิมพ์แบบไหลเป็นส่วนหนึ่งของการเปิดตัวธีมใหม่ได้

สร้างและทดสอบไซต์และรูปแบบการพิมพ์ใหม่ใน WordPress

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

ประสิทธิภาพของเว็บ

เวลาในการโหลดมีความสำคัญ! คุณรู้หรือไม่ว่าเว็บไซต์ของคุณเร็วแค่ไหน?

เรียนรู้เพิ่มเติม