เครื่องสร้างกล่องข้อความ
ห่อข้อความใดๆ ไว้ในกล่องหรือกรอบที่วาดขึ้นจากอักขระเส้น Unicode ธรรมดา พิมพ์หรือวางข้อความของคุณ เลือกสไตล์กรอบ การจัดวาง และระยะขอบ แล้วคัดลอกผลลัพธ์ เพราะมันเป็นข้อความธรรมดา ไม่ใช่รูปภาพ กล่องจึงวางลงในคอมเมนต์ README code block เทอร์มินัล หรือแชตได้ — และไม่มีข้อมูลใดออกจากเบราว์เซอร์ของคุณ
การจัดวาง
ระยะขอบ
วิธีใช้ กรอบข้อความ
- 1
พิมพ์หรือวางข้อความของคุณ
ใส่ข้อความที่คุณต้องการใส่กรอบ จะบรรทัดเดียวหรือหลายบรรทัดก็ได้ — กล่องจะขยายให้พอดีกับบรรทัดที่กว้างที่สุด
- 2
เลือกสไตล์กล่อง
เลือกกรอบอย่างเช่น เส้นเดี่ยว มุมมน เส้นคู่ เส้นหนา ASCII เส้นประ ดาว หรือบล็อก ให้เข้ากับที่ที่คุณจะนำไปวาง
- 3
ตั้งค่าการจัดวางและระยะขอบ
จัดข้อความให้ชิดซ้าย กึ่งกลาง หรือชิดขวาภายในกล่อง และเพิ่มระยะขอบด้านในเพื่อให้มีช่องว่างหายใจรอบๆ คำเล็กน้อย
- 4
คัดลอกแล้ววาง
ข้อความในกล่องจะปรากฏทันทีด้านล่าง คัดลอกแล้วนำไปวางในคอมเมนต์ README code block เทอร์มินัล หรือแชต
เกี่ยวกับการวาดกล่องและกรอบล้อมรอบข้อความ
อักขระวาดกล่องคืออะไร
นานก่อนที่จะมีกราฟิก เทอร์มินัลเคยวาดตาราง กรอบ และเมนูด้วยชุดอักขระ Unicode พิเศษที่สร้างขึ้นมาเพื่องานนี้โดยเฉพาะ ทั้งมุม เส้นแนวนอนและแนวตั้ง และจุดเชื่อมต่อที่ประสานกันอย่างไร้รอยต่อจนกลายเป็นเส้นขอบต่อเนื่อง อักขระชุดเดียวกันนี้ยังคงใช้งานได้ในแอปสมัยใหม่ทุกตัว คุณจึงใส่กรอบให้โน้ตหรือหัวข้อด้วยสี่เหลี่ยมจริงๆ ได้ แทนที่จะเป็นแถวของขีดที่บรรจบกันไม่สนิทตรงมุม
เพราะภาพอักขระแต่ละตัวเป็นข้อความธรรมดา กล่องที่คุณสร้างขึ้นที่นี่จึงไม่ใช่รูปภาพ มันคัดลอกและวางได้เหมือนคำอื่นๆ ทุกประการ คงอยู่ได้แม้ถูกยกมาอ้างหรือถูกแก้ไข และอ่านได้ด้วยทุกสิ่งที่อ่านข้อความได้ นี่จึงเป็นเหตุผลว่าทำไมข้อความในกล่องจึงปรากฏอยู่ในไฟล์ README เครื่องมือบรรทัดคำสั่ง และคอมเมนต์ในโค้ดอยู่ทั่วทุกหนแห่ง
ส่องดูภายในบล็อก Box Drawing ของ Unicode
ภาพอักขระเส้นเหล่านี้มาจากช่วงเฉพาะของ Unicode ที่เรียกว่าบล็อก Box Drawing ซึ่งเป็นชุดอักขระราว 128 ตัวที่ออกแบบขึ้นในยุคของเทอร์มินัลแบบข้อความ เพื่อให้ซอฟต์แวร์สามารถวาดตารางและหน้าต่างได้ ในนั้นมีทั้งมุมทั้งสี่ เส้นแนวนอนและแนวตั้ง รวมถึงจุดเชื่อมต่อรูปตัว T และรูปกากบาท ในหลายน้ำหนักเส้น ทั้งเส้นบาง เส้นหนา และเส้นคู่ ส่วนมุมโค้งมนที่ทำให้สไตล์มุมมนดูนุ่มนวลก็เป็นส่วนหนึ่งของบล็อกเดียวกันนี้ นั่นจึงเป็นเหตุผลว่าทำไมเส้นโค้งจึงบรรจบกับเส้นตรงได้อย่างเรียบเนียน
การรู้ว่าบล็อกนี้มีอยู่ช่วยอธิบายว่าทำไมกรอบที่นี่จึงเชื่อมต่อกันได้อย่างสมบูรณ์ ขณะที่เส้นขอบที่พิมพ์เองด้วยขีดและเครื่องหมายบวกไม่เคยทำได้สนิทเท่า เพราะภาพอักขระมุมบนซ้ายของจริงถูกสร้างมาให้บรรจบกับเส้นแนวนอนของจริงที่ระดับความสูงพอเหมาะพอดี สี่เหลี่ยมจึงปิดได้สนิทไร้ช่องว่าง ซึ่งเป็นสิ่งที่ปุ่มขีดล่างและปุ่มขีดตั้งบนแป้นพิมพ์ของคุณไม่อาจรับประกันได้
การเลือกสไตล์และเลย์เอาต์
สไตล์ของกรอบเป็นตัวกำหนดอารมณ์ เส้นเดี่ยวและมุมมนนั้นเงียบเรียบและเป็นระเบียบ เหมาะกับโน้ตเล็กๆ ส่วนเส้นคู่และเส้นหนาดึงดูดสายตามากกว่า เหมาะกับหัวเรื่องหรือคำเตือน ขณะที่ ASCII เป็นตัวเลือกที่ปลอดภัยเมื่อคุณไม่แน่ใจว่าปลายทางรองรับอักขระพิเศษหรือไม่ เพราะมันใช้เพียงปุ่มพื้นฐานที่สุดเท่านั้น ส่วนดาวและบล็อกนั้นมีไว้ตกแต่งและโดดเด่นในแชตหรือแบนเนอร์
การจัดวางและระยะขอบควบคุมว่าคำต่างๆ จะอยู่ภายในกรอบอย่างไร การจัดกึ่งกลางเหมาะกับหัวเรื่องสั้นๆ ขณะที่การจัดชิดซ้ายดูเป็นธรรมชาติสำหรับรายการหรือประโยค ระยะขอบหนึ่งหรือสองช่วยเพิ่มช่องว่างให้ข้อความไม่ติดกับเส้นขอบ ซึ่งมักจะอ่านง่ายกว่ากรอบที่อัดแน่นชิดกับตัวอักษร
เส้นขอบ Unicode เทียบกับ ASCII สำรอง
ที่นี่มีกรอบอยู่สองตระกูล และการเลือกให้ถูกตัวส่วนใหญ่ขึ้นอยู่กับว่ากล่องจะไปอยู่ที่ไหน สไตล์ Unicode อย่างเส้นเดี่ยว มุมมน เส้นคู่ และเส้นหนา วาดเส้นที่คมชัดและต่อเนื่อง และดูดีที่สุดในแอปสมัยใหม่ที่รองรับบล็อก Box Drawing อย่างเต็มที่ ซึ่งทุกวันนี้ก็แทบทุกที่แล้ว ส่วนสไตล์ ASCII นั้นเรียบง่ายกว่าโดยตั้งใจ มันสร้างกรอบจากเพียงปุ่มเครื่องหมายบวก ลบ และไปป์ ซึ่งเป็นอักขระที่ทุกระบบรองรับมาตั้งแต่แรกเริ่ม
หยิบ ASCII มาใช้เมื่อปลายทางเก่า ไม่แน่ชัด หรือเข้มงวดเรื่องอักขระ เช่น เทอร์มินัลรุ่นเก่า ไฟล์คอนฟิก อีเมลแบบข้อความล้วน หรือโค้ดที่ต้องคง ASCII บริสุทธิ์ มุมจะดูเป็นเหลี่ยมขึ้นเล็กน้อยเพราะเครื่องหมายบวกกำลังทำหน้าที่แทนภาพอักขระมุมของจริง แต่กล่องก็รับประกันได้ว่าจะแสดงผลเหมือนกันทุกที่ ส่วนกรณีอื่นๆ ทั้งหมด สไตล์ Unicode จะให้ผลลัพธ์ที่สะอาดตากว่า
ทำไมฟอนต์ monospace จึงสำคัญ พร้อมตัวอย่างการใช้งานจริง
กล่องที่วาดขึ้นจะคงเป็นสี่เหลี่ยมจัตุรัสได้ก็ต่อเมื่อทุกอักขระกินพื้นที่ความกว้างเท่ากัน ซึ่งเป็นคุณสมบัติเด่นที่นิยามฟอนต์แบบ monospace หรือความกว้างคงที่ ในสภาพเช่นนั้นเส้นบน เส้นล่าง และเส้นข้างทั้งสองจะวัดออกมาได้จำนวนคอลัมน์เท่ากัน สี่เหลี่ยมจึงปิดได้อย่างเรียบร้อย ลองพิมพ์ Hello ในเครื่องมือนี้ด้วยกรอบเส้นเดี่ยวและระยะขอบหนึ่ง คุณจะได้เส้นบนที่ประกอบด้วยมุมและขีด เส้นกลางที่อ่านได้ว่า │ Hello │ และเส้นล่างที่เข้าคู่กัน รวมเป็นสามแถวที่ขอบเรียงตรงกันอย่างสมบูรณ์ในฟอนต์โค้ดใดๆ
ลองนำกล่องเดียวกันนั้นไปวางในแชตที่ใช้ฟอนต์แบบ proportional แล้วภาพลวงตาจะแตกสลาย เพราะตัวอักษรเรียวอย่าง i กินพื้นที่น้อยกว่าตัวอ้วนอย่าง m ทำให้เส้นขอบด้านขวาดูไม่เรียบ วิธีแก้คือนำกล่องไปวางในที่ที่ฟอนต์ความกว้างคงที่ครองอยู่ อย่าง code block หรือเทอร์มินัล แทนที่จะไปแก้ที่ตัวกล่องเอง
การจัดเรียงกล่องที่มีอักขระกว้างอยู่ข้างใน
ตัวอักษรและตัวเลขส่วนใหญ่กินพื้นที่หนึ่งคอลัมน์ แต่บางอักขระกินถึงสองคอลัมน์ อีโมจิ และข้อความภาษาจีน ญี่ปุ่น และเกาหลี เป็นอักขระความกว้างสองเท่าในเทอร์มินัล เครื่องมือจึงอาจนับมันเป็นหนึ่งอักขระ ทั้งที่หน้าจอวาดมันออกมากินสองคอลัมน์ ผลที่ได้คือกล่องที่ขอบด้านขวาดูเหลื่อมไปหนึ่งคอลัมน์ ทั้งที่ข้อความเบื้องหลังเป็นสี่เหลี่ยมตรงดี การนับนั้นถูกต้อง แต่การแสดงผลกว้างกว่า
นี่เป็นคุณสมบัติของวิธีที่ฟอนต์แสดงผลภาษาเหล่านั้น ไม่ใช่ข้อบกพร่องของกล่อง หากกรอบที่ล้อมรอบอีโมจิหรือข้อความ CJK ดูเอียงเบี้ยว สไตล์เส้นเดี่ยวธรรมดาหรือ ASCII จะทนต่อความต่างนี้ได้ดีที่สุด และการเพิ่มระยะขอบสักหน่อยก็ช่วยกลบการเลื่อนไปหนึ่งคอลัมน์ได้ หากต้องการผลลัพธ์ที่เป็นสี่เหลี่ยมจัตุรัสสมบูรณ์ ให้คงเนื้อหาไว้เป็นอักขระความกว้างเดียว
การใช้ข้อความในกล่องให้ได้ผล
ข้อความในกล่องโดดเด่นเมื่อมันชี้ให้เห็นบางสิ่ง เช่น หัวเรื่องด้านบนของ README โน้ตในคอมเมนต์ของโค้ด แบนเนอร์ ASCII ในโปรแกรมเทอร์มินัล หรือข้อความที่ถูกเน้นใน code block บนฟอรัม หยิบกล่องมาใช้เมื่อบล็อกข้อความสมควรมีกรอบที่มองเห็นได้ และเก็บเนื้อหาให้สั้น เพื่อให้สี่เหลี่ยมคงความกว้างที่พอเหมาะ
กฎข้อเดียวที่สำคัญคือฟอนต์ กล่องจะคงเป็นสี่เหลี่ยมจัตุรัสได้ก็ต่อเมื่ออยู่ในสภาพแวดล้อม monospace เท่านั้น ดังนั้นให้นำไปวางในที่ที่ใช้ฟอนต์ความกว้างคงที่ และเลือกสไตล์เส้นเรียบง่ายไว้ก่อนหากไม่แน่ใจ บน GitHub, Discord, Reddit และ Slack นั่นหมายถึงการห่อกล่องไว้ใน code block ซึ่งจะบังคับใช้ฟอนต์ความกว้างคงที่และทำให้ทุกขอบเรียงตรงกัน
คำถามที่พบบ่อย
เครื่องสร้างกล่องข้อความคืออะไร?
ฉันจะคัดลอกกล่องได้อย่างไร?
ข้อความในกล่องดูดีที่สุดที่ไหน?
ทำไมกล่องถึงดูเบี้ยวในบางแอป?
สไตล์แต่ละแบบต่างกันอย่างไร?
ข้อความของฉันถูกส่งไปที่ไหนหรือไม่?
เครื่องมือที่เกี่ยวข้อง
ทำงานต่อด้วยเครื่องมือที่มีประโยชน์เหล่านี้