วิธีตั้งค่าข้อความที่ถูกต้องด้วย CSS

ใช้คุณสมบัติ CSS Text-Align เพื่อปรับข้อความ

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

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

วิธีการทำงานไม่ถูกต้อง?

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

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

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

วิธีการปรับข้อความ

การจัดชิดข้อความด้วย CSS ต้องใช้ส่วนของข้อความเพื่อปรับ

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

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

text-align: ปรับ;

คุณจะต้องใช้กฎ CSS นี้กับตัวเลือกที่เหมาะสมเพื่อให้บล็อกข้อความแสดงผลตามที่ตั้งใจไว้

เมื่อใดควรแสดงข้อความ

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

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

นอกจากปัญหาเรื่องการอ่านแล้วช่องว่างที่ว่างเปล่าบางครั้งก็ขึ้นบรรทัดใหม่เพื่อสร้าง "แม่น้ำ" ในพื้นที่สีขาวตรงกลางของข้อความ

ช่องว่างขนาดใหญ่ที่มีช่องว่างสีขาวสามารถทำให้การแสดงผลที่น่าอึดอัดใจ นอกจากนี้ในสายสั้นมากเหตุผลที่สามารถทำให้เกิดบรรทัดที่มีหนึ่งคำที่มีช่องว่างพิเศษระหว่างตัวอักษรตัวเอง

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

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

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

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