كيفية تطوير محرر نصوص للويب

أنا أعمل في Readymag ، التي تصنع أداة تصميم قائمة على المستعرض تساعد الأشخاص على إنشاء مواقع الويب ، والمحافظ ، وجميع أنواع المنشورات عبر الإنترنت ، بدون تشفير. تتوفر العديد من الأدوات في أداتنا ، وتعد أداة النص واحدة من أكثر الأدوات استخدامًا.

عنصر واجهة النص هو حقل إدخال نص حيث يمكن للمستخدم نمط النص باستخدام مجموعة من عناصر التحكم في المحرر. يطبق كل عنصر تحكم خاصية CSS على النص. من جانب المستخدم ، يبدو أنه حقل عادي لإدخال النص ، ولكن يتم إخفاء عدد كبير من العمليات المعقدة خلف بساطته الظاهرة.

في هذه المقالة ، سأشرح التحديات التي واجهتها شركتي والحلول التي استخدمناها لإنشاء عنصر واجهة مستخدم نصي في تطبيقنا. سأتعمق أيضًا في كيفية تنفيذنا لها وما تعلمناه على طول الطريق - وكيف تعمل الكتابة على الويب بشكل عام.

تحرير النص على الويب

هناك عدة طرق لتنفيذ حقول إدخال النص على الويب. يمكننا استخدام حقل نصي بسيط ، أو عنصر textarea متعدد الأسطر ، أو سمة contenteditable القابلة للتحرير لجعل الإدخال قابلاً للتحرير ، أو document.designMode = on . كيف هم مختلفون؟

تعد عناصر input و textarea مثالية لإضافة نص إلى الصفحة ، لكنها لا توفر تجربة تنسيق نص ثرية. لهذا ، يمكننا استخدام سمة contenteditable لجعل أي عنصر تقريبًا قابلاً للتحرير وتمكين استخدام أنماط النص.

إذا كنت تريد تحرير الصفحة بأكملها مرة واحدة ، فيمكنك استخدام document.designMode . يسمح هذا الوضع بتحرير أي عنصر داخل مستند معين ، حتى إطار iframe .

اخترنا سمة contenteditable القابلة للتحرير ، والتي تتضمن جميع إمكانيات تحرير النص الضرورية. باستخدام هذه السمة ، يصبح أي نص في الصفحة قابلاً للتحرير ، وهو أمر مهم جدًا إذا أردنا تمكين الأشخاص من نمط النص باستخدام CSS . على سبيل المثال ، يمكن للمستخدمين بعد ذلك تحديد نمط الأقسام المحددة أو النص بأكمله مباشرة.

أنماط النص وخصائص الخط

نحن نمكن المستخدمين من تصميم النص بأي طريقة يرغبون بها من خلال توفير الوصول إلى جميع الخيارات التي يوفرها CSS خارج الصندوق. بالإضافة إلى الخصائص المعروفة ، مثل الخط والنمط واللون والديكور ، فإننا نمنح المستخدمين الفرصة لاستخدام ميزات خط OpenType ، مثل الحروف المركبة والمجموعات الأسلوبية والكسور وما إلى ذلك. تعمل هذه الميزات من خلال 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 .

بمساعدة هذين الجدولين ، يمكننا تغطية جميع متطلباتنا: استخدام خصائص الخط المتغيرة وميزات الخط المختلفة. يتم عرض البيانات الناتجة في عناصر تحكم عنصر واجهة النص في المحرر ، حيث يمكن للمستخدمين نمط النص دون استخدام أي تعليمات برمجية.

استخدام لوحة المفاتيح الخاصة بك

يعد إدخال النص أحد أهم جوانب تجربة مستخدم أداة النص. بالإضافة إلى تمكين الاختصارات للعمل مع النص ، كان علينا التعامل مع بعض التحديات غير العادية. كان التنقل عبر النص باستخدام مفاتيح الأسهم أحدها بالتأكيد.

أثناء قيام المستخدم بالتحرير ، تعرض أداة النص أيضًا أحرفًا مخفية ، مثل المسافات غير الفاصلة وفواصل الأسطر. يتم تنفيذها كرموز SVG مدرجة في النص ، مما يطرح مشكلة: إذا استخدمنا contenteditable ، فإن هذه الرموز تمنع المستخدمين من تحريك المؤشر باستخدام مفاتيح الأسهم.

الحل بسيط بما فيه الكفاية: استخدم span و :before العنصر الزائف. بهذه الطريقة ، يرى المتصفح الرمز على أنه نص وتعمل مفاتيح الأسهم بشكل رائع.

 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 على منفذي عرض: سطح المكتب والجوال . يمكن أن تظهر أنماط النص مختلفة في كل منها. أثناء إدخال النص ، سيقوم المحرر بإجراء عمليات حسابية متنوعة لمزامنة البيانات بين إطارات العرض. يتم تحقيق استجابة عالية باستخدام واجهة برمجة تطبيقات المتصفح: requestAnimationFrame و requestIdleCallback :

• يتم استدعاء requestAnimationFrame في كل مرة يتم فيها تحديث الشاشة ؛
• يتم استدعاء requestIdleCallback فقط عندما يكون المتصفح في وضع الخمول.

هذه طريقة رائعة لإجراء عمليات مملة دون حجب الخيط الرئيسي.

إمكانية الوصول

يعد تمكين الوصول أحد أهم الممارسات في تطوير الويب اليوم. إذا تم تصميم موقع الويب الخاص بك مع وضع إمكانية الوصول في الاعتبار ، فسوف يمنح المزيد من الأشخاص إمكانية الوصول إلى منتجك . وهذا يعني ليس فقط استيعاب الأشخاص ذوي الإعاقة ولكن أيضًا المستخدمين على منصات مختلفة: أجهزة سطح المكتب وأجهزة اللمس ، وقارئات الشاشة ، وأجهزة السمع ، وما إلى ذلك. لفهم مدى أهمية إتاحة الوصول للمشاريع ، أوصي بمراجعة إحصائيات إمكانية الوصول الحديثة.

لبدء دمج ممارسات الوصول إلى الويب ، تحقق أولاً من إرشادات الوصول إلى محتوى الويب (WCAG) ، وهي المورد الأكثر شمولاً حول هذا الموضوع. وطالما أن Readymag هي أداة للنشر ، بالإضافة إلى WCAG ، نحتاج أيضًا إلى اتباع إرشادات إمكانية الوصول إلى أداة التأليف (ATAG).

فريقنا حاليًا في مرحلة دمج إمكانية الوصول في المحرر. في المقالات اللاحقة ، سوف نشارك المزيد حول رحلتنا نحو دمج إمكانية الوصول بشكل كامل في Readymag. يمكنك أيضًا التحقق من أي عمل تم إجراؤه باستخدام Readymag باستخدام قائمة التحقق الخاصة بإمكانية الوصول.

أفضل الممارسات

أخيرًا ، إليك بعض النصائح لمساعدتك في تطوير محرر نصوص على الويب:

• فكر جيدًا في التخطيط.
  حدد مسبقًا الإمكانات التي تحتاجها وكيف ستعمل مع العناصر الموجودة في محرر النصوص.
• قم بإعداد اختبار بصري.
  عند التعامل مع النص ، لا يمكنك الاعتماد كليًا على نتيجة اختبار اللقطة. قد تحصل على النتيجة الصحيحة في الاختبار ، مع توقع CSS المحدد للكتلة ، ولكن في بعض الأحيان قد لا تكون النتيجة كما كنت تتوقع.
• اختبر عملك في متصفحات مختلفة.
  بينما تدعم معظم المتصفحات الميزات الجديدة عبر الإنترنت بشكل معقول ، فغالبًا ما توجد مشاكل في عرض نفس الأنماط في متصفحات مختلفة.
• استخدم علامات الميزات لتطوير أكثر أمانًا للميزات الجديدة.
• قياس FPS في المتصفح عند إدخال نص.
  لا تقم بمهام تستهلك وحدة المعالجة المركزية في سلسلة واحدة.
• لا تخف من التجربة .
• أخيرًا وليس آخرًا ، جرب Text Widget في Readymag.

بعض الروابط المفيدة

• "العرض التوضيحي الكامل لـ CSS لميزات OpenType ،" Sparanoid
• "مقدمة إلى الخطوط المتغيرة على الويب" ، web.dev
• "طباعة رائعة" ، جويل جاليران
• "الخطوط المتغيرة" نيك شيرمان
• Fontkit
• OpenType.js