วิธีการพัฒนาโปรแกรมแก้ไขข้อความสำหรับเว็บ

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

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

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

การแก้ไขข้อความบนเว็บ

มีหลายวิธีในการใช้ฟิลด์ป้อนข้อความบนเว็บ เราสามารถใช้ฟิลด์ข้อความธรรมดา หรือองค์ประกอบ textarea แบบหลายบรรทัด หรือแอตทริบิวต์ contenteditable เพื่อทำให้อินพุตสามารถแก้ไขได้ หรือ document.designMode = on ต่างกันอย่างไร?

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

หากคุณต้องการแก้ไขทั้งหน้าพร้อมกัน คุณสามารถใช้ document.designMode โหมดนี้อนุญาตให้แก้ไของค์ประกอบใดๆ ภายในเอกสารที่กำหนด แม้กระทั่ง iframe

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

ลักษณะข้อความและคุณสมบัติแบบอักษร

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

หมายเหตุ : ฉันขอแนะนำให้อ่านบทความที่ยอดเยี่ยมของ Sparanoid ที่แสดงคุณลักษณะทั้งหมดของ OpenType

การพิมพ์สมัยใหม่ได้ก้าวไปข้างหน้าอย่างมาก ทำให้สามารถใช้ฟอนต์แบบแปรผันบนเว็บได้ผ่านคุณสมบัติ font-variation-settings

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

 .style-1 { font-weight: 600; } .style-2 { font-variation-settings: "wght" 777; }

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

นอกเหนือจากค่าที่ลงทะเบียนไว้ ( wght , wdth , slnt ฯลฯ) ผู้สร้างฟอนต์ยังสามารถสร้างคุณสมบัติฟอนต์เฉพาะของตนเองได้ (ดังในตัวอย่างด้านบน) เพื่อให้ผู้ใช้ของเรามีโอกาสใช้คุณลักษณะแบบอักษรที่เป็นไปได้ทั้งหมด เราต้องการข้อมูลนี้ก่อน

คุณลักษณะทั้งหมดที่คุณต้องการใช้ควรกำหนดไว้ในไฟล์ฟอนต์ ลองดูที่ข้อกำหนด แต่ละฟอนต์สามารถแสดงในรูปแบบของตาราง โดยให้ข้อมูลที่แตกต่างกันทั้งหมดที่ใช้ในการแสดงอักขระ

เราใช้สองตารางเพื่อรวบรวมข้อมูลเกี่ยวกับแบบอักษรนี้:

1. ตารางการทดแทนสัญลักษณ์
   ตารางการแทนที่สัญลักษณ์ (GSUB) มีรายการข้อมูลการแสดงสัญลักษณ์ วัตถุ GSUB.featureList เป็นการแจงนับคุณลักษณะแบบอักษรและคุณสมบัติ คุณสามารถดูตัวอย่างข้อมูลในตารางบน GitHub ในตารางนี้ ฟิลด์ tag น่าสนใจที่สุด นี่คือชื่อของฟีเจอร์ฟอนต์ และบ่งบอกว่าฟีเจอร์นี้ใช้ได้กับฟอนต์นี้ เราสามารถใช้ tag ในคุณสมบัติ font-feature-settings ได้อย่างปลอดภัย
2. ตารางรูปแบบตัวอักษร
   ตารางรูปแบบแบบอักษร (fvar) คือการแสดงคุณสมบัติของตัวแปรที่เกี่ยวข้องกับแบบอักษร ตัวอย่างของตารางยังมีอยู่ใน GitHub แต่ละอ็อบเจ็กต์เป็นคุณสมบัติฟอนต์ พร้อมคำอธิบายของค่าที่เป็นไปได้ ( min , max , default) และชื่อที่แปลแล้ว (ถ้ามี) เราใช้ค่าเหล่านี้กับคุณสมบัติ font-variation-settings

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

การใช้คีย์บอร์ดของคุณ

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

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

วิธีแก้ปัญหานั้นง่ายพอสมควร: ใช้ span และ :before pseudo-element ด้วยวิธีนี้ เบราว์เซอร์จะรับรู้ว่าไอคอนเป็นข้อความและปุ่มลูกศรใช้งานได้ดี

 span:before { content: ""; height: 1em; position: relative; background-repeat: no-repeat; background-image: url("data:image/svg+xml,..."); background-position: center bottom; background-size: 1em; }

ทางลัด

มีแป้นพิมพ์ลัดสองปุ่มสำหรับวางข้อความในวิดเจ็ตข้อความ

Cmd / Ctrl + V วางข้อความจากคลิปบอร์ดและเก็บสไตล์ที่มีในเอกสารต้นฉบับ หากข้อความถูกคัดลอกจากแอปพลิเคชัน เช่น Pages, Notes, Word หรือ Google Docs คลิปบอร์ดของคุณจะมีข้อมูล HTML ไม่ใช่แค่ข้อความธรรมดา HTML นี้สามารถแยกวิเคราะห์และวางได้ในขณะที่ยังคงรูปแบบเดิมไว้

คุณสามารถรับข้อมูล HTML ได้ดังนี้:

 // https://www.w3.org/TR/clipboard-apis/#reading-from-clipboard document.addEventListener('paste', (e) => { const text = e.clipboardData.getData('text/plain'); const html = e.clipboardData.getData('text/html'); handlePaste(); });

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

การเลือกข้อความและโฟกัส

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

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

มี สองตัวเลือกในการแก้ปัญหานี้ :

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

เราลงเอยด้วยวิดเจ็ตข้อความที่ห่อด้วย iframe ดังนั้น ตราบใดที่ส่วนที่เลือกอยู่ภายใน iframe การเลือกนั้นจะยังคงมีอยู่แม้ว่าจะมีการย้ายโฟกัสภายนอก ดูภาพหน้าจอด้านล่าง เรามีสองตัวเลือกบนหน้า: ส่วนที่เลือกในวิดเจ็ตข้อความและค่าที่เลือกของขนาดข้อความในตัวควบคุม

ประสิทธิภาพระหว่างการป้อนข้อความ

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

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

• requestAnimationFrame ถูกเรียกทุกครั้งที่รีเฟรชหน้าจอ
• requestIdleCallback จะถูกเรียกเฉพาะเมื่อเบราว์เซอร์ไม่ได้ใช้งาน

นี่เป็นวิธีที่ยอดเยี่ยมในการดำเนินการที่น่าเบื่อโดยไม่ต้องบล็อกเธรดหลัก

การช่วยสำหรับการเข้าถึง

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

ในการเริ่มต้นรวมแนวทางการช่วยสำหรับการเข้าถึงเว็บ ก่อนอื่นให้ตรวจสอบหลักเกณฑ์การช่วยสำหรับการเข้าถึงเนื้อหาเว็บ (WCAG) ซึ่งเป็นทรัพยากรที่ครอบคลุมมากที่สุดในหัวข้อนี้ และตราบใดที่ Readymag เป็นเครื่องมือสำหรับการเผยแพร่ นอกจาก WCAG เราก็ยังต้องปฏิบัติตาม Authoring Tool Accessibility Guidelines (ATAG) ด้วย

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

ปฏิบัติที่ดีที่สุด

สุดท้าย ต่อไปนี้คือเคล็ดลับบางประการที่จะช่วยคุณพัฒนาโปรแกรมแก้ไขข้อความบนเว็บ:

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

ลิงค์ที่มีประโยชน์บางส่วน

• “ตัวอย่าง CSS ที่สมบูรณ์สำหรับคุณสมบัติ OpenType” Sparanoid
• “ความรู้เบื้องต้นเกี่ยวกับฟอนต์ตัวแปรบนเว็บ” web.dev
• “วิชาการพิมพ์ที่ยอดเยี่ยม” Joel Galeran
• “ฟอนต์ตัวแปร” นิค เชอร์แมน
• Fontkit
• OpenType.js