لتعطيل ظهور واحد لرابطة حرفية في تسمية ويب، ضع حروفها داخل عنصر span مضمن وعطّل ميزة الربط الحرفي المناسبة فيه. يحتفظ النص الآخر بإعداداته. لا يتضمن CSS مفتاحًا عامًا يعطّل رابطة حرفية محددة بالاسم في الخط كله. تحدد عناصر التحكم في الروابط الحرفية لدى MDN فئات الميزات لا الاستبدالات الفردية.

هذا الدليل موجّه إلى مستخدم Mac يحرر HTML وCSS لصفحة ويب. والمهمة المحددة هي فصل أول fi في التسمية الاصطناعية fine flake office fine، مع السماح للنص المتبقي بالاحتفاظ بروابطه الحرفية. يُظهر اختبار محلي صغير الفرق بين تغيير ظهور واحد وتغيير ميزة كاملة.

ما الذي يمكن لـ CSS تعطيله انتقائيًا؟

قد تحتوي ميزة الرابط الحرفي على عدة استبدالات. يعني تعطيل liga تعطيل تلك الميزة للنص المتأثر؛ ولا يعني تحديد زوج بعينه من الحروف. وبالمثل، يتحكم font-variant-ligatures: no-common-ligatures في الروابط الحرفية الشائعة عبر liga وclig. وتعتمد الاستبدالات الفعلية على الخط. MDN: font-variant-ligatures

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

النتيجة المطلوبة الأسلوب المناسب الشرط
فصل ظهور واحد لـ fi ضع هذا الظهور داخل عنصر، وعطّل ميزته محليًا يمكنك تحرير الترميز
إزالة الروابط الحرفية الاختيارية مع الإبقاء على الشائعة استخدم no-discretionary-ligatures على العنصر المقصود ينتمي الاستبدال غير المرغوب فيه إلى dlig
إزالة كل fi مع الإبقاء على كل الروابط الحرفية الشائعة الأخرى استخدم ميزة موثقة خاصة بالخط، إن توفرت يجب أن يوفر الخط عنصر التحكم اللازم
تغيير ظهور واحد في تطبيق لا يمكنك تحريره ابحث عن تنسيق الأحرف الذي يوثقه التطبيق لا يحدد CSS للويب ما يدعمه تطبيق سطح المكتب

فضّل font-variant-ligatures للفئات التي يدعمها. توصي MDN بخصائص الخط الأعلى مستوى متى توفرت؛ أما font-feature-settings فيتيح الوصول إلى ميزات OpenType الأقل مستوى في الحالات الأخرى. إن كتابة font-feature-settings: \"liga\" off لا تضيف تحكمًا خاصًا بزوج معين. MDN: font-feature-settings

أجرِ مقارنة محلية على جهاز Mac

ابدأ بملف مستقل حتى تتمكن من مقارنة النتيجة دون تأثير أنماط أخرى في الصفحة. في TextEdit، اختر File > New، ثم Format > Make Plain Text. أدخل المثال الكامل أدناه، واحفظه باسم ligature-demo.html، واختر Use .html إذا طُلب منك ذلك. هذه هي الخطوات التي توثقها Apple لإنشاء ملف HTML في TextEdit. Apple: العمل مع مستندات HTML في TextEdit على Mac

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

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Ligature comparison</title>
  <style>
    body {
      margin: 2rem;
      color: #222;
      background: #fff;
      font-family: system-ui, sans-serif;
    }

    main {
      max-width: 42rem;
    }

    .sample {
      font-family: Georgia, "Times New Roman", serif;
      font-size: 2.5rem;
      line-height: 1.5;
      letter-spacing: normal;
      font-variant-ligatures: common-ligatures;
    }

    .separate-pair,
    .all-common-off {
      font-variant-ligatures: no-common-ligatures;
    }
  </style>
</head>
<body>
  <main>
    <h2>Baseline</h2>
    <p class="sample">fine flake office fine</p>

    <h2>First pair separated</h2>
    <p class="sample"><span class="separate-pair">fi</span>ne flake office fine</p>

    <h2>All common ligatures disabled</h2>
    <p class="sample all-common-off">fine flake office fine</p>
  </main>
</body>
</html>

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

اقرأ المقارنة على ثلاث مراحل:

  1. قارن أول fine في الصفين الأساسي والأوسط. ركّز على أشكال الحروف، لا على العرض الإجمالي فقط.
  2. قارن flake وoffice وآخر fine بين هذين الصفين. تقع هذه العناصر خارج الاستثناء، ومن المفترض أن تحتفظ بإعدادات ميزاتها الأصلية.
  3. قارن الصف السفلي بالصفوف الأخرى. هذا هو عنصر التحكم الأوسع: إذ تُعطّل الروابط الحرفية الشائعة في ذلك الصف كله.

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

طبّق الاستثناء من دون الإخلال بتدفق النص

في تسمية قصيرة، ضع عنصر span مباشرة حول التسلسل الكامل الذي تريد فصله. أبقِ الأحرف السابقة واللاحقة له متجاورة في المصدر، كما يفعل المثال مع fi وne. لا تُدرج مسافة أو سطرًا جديدًا داخل الكلمة لمجرد تسهيل قراءة الترميز.

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

أبقِ هذا الاستثناء عنصر span مضمنًا عاديًا. فإضافة inline-block أو التباعد أو أغلفة التخطيط تُدخل قرارات تخطيط إضافية لا تتطلبها المهمة. بعد تطبيق إعداد الطباعة، ضيّق نافذة المتصفح وافحص التسمية في الحاوية المقصودة. تحقّق من عدم تغير التفاف الأسطر، إذ يمكن لاختيار محارف مختلف أن يغيّر المساحة التي يشغلها النص.

عند التعامل مع تسلسلات أطول، حدّد الحد المقصود بوضوح. إذا شمل الاستبدال غير المرغوب فيه ffi، فإن وضع fi وحده داخل عنصر ينشئ أيضًا حدًا للتنسيق داخل التسلسل الأكبر. اختبر الكلمة كاملة والحروف المجاورة بدلًا من افتراض أن كل الاستبدالات المتداخلة ستتصرف باستقلالية.

عند تكييف المثال مع صفحة موجودة، حرّر التسمية ذات الصلة في مصدرها أو مكوّنها. تجنب إعادة بناء فقرة كاملة من نصها الظاهر لمجرد إضافة استثناء واحد؛ وأبقِ الروابط والتأكيدات وبنية العناصر الموجودة كما هي. يتعامل هذا المثال عمدًا مع ظهور معروف واحد بدلًا من محاولة الاستبدال التلقائي في صفحة عشوائية.

ماذا لو بقي الرابط الحرفي، أو اختفت روابط حرفية أخرى؟

استخدم المقارنة لتشخيص المشكلة بالتتابع بدلًا من إضافة المزيد من التجاوزات فورًا.

أولًا، تحقّق من فئة الميزة. يستهدف المثال الروابط الحرفية الشائعة. إذا كان الخط يوثق الاستبدال غير المرغوب فيه ضمن dlig، فطبّق no-discretionary-ligatures على الاستثناء بدلًا من ذلك. قد يتضمن الاستبدال السياقي calt، الذي يتحكم فيه no-contextual؛ وقد يؤثر هذا الإعداد في صيغ سياقية أخرى داخل النص المحدد. تعريفات فئات الميزات لدى MDN

بعد ذلك، تحقّق من الإعدادات المتضاربة. يمكن لتصريح font-feature-settings موجود أن يتجاوز خيارات الميزات التي توحي بها font-variant-ligatures. تحدد W3C أن إعدادات الميزات منخفضة المستوى تُطبّق لاحقًا أثناء حسم الميزات. راجع ذلك التصريح قبل استنتاج أن أسلوب عنصر span غير مدعوم. W3C: حسم ميزات الخط وتنوعاته

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

وأخيرًا، ميّز بين الطباعة الاختيارية والتشكيل المطلوب. إن font-variant-ligatures: none أوسع مما تحتاج إليه هذه المهمة، كما أن الروابط الحرفية المطلوبة لا تشملها عناصر التعطيل. وتحافظ W3C صراحةً على الروابط الحرفية المطلوبة عند استخدام هذه الخاصية. W3C: الروابط الحرفية

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

هل توفر مكتبة التشكيل تحكمًا أدق؟

يتيح HarfBuzz نطاقات الميزات عبر hb_feature_t: إذ تتضمن الميزة وسمًا وقيمة وبداية شاملة ونهاية غير شاملة، معبّرًا عنها بقيم العناقيد. وهذا يسمح للتطبيق الذي يستدعي مكتبة التشكيل بتطبيق إعداد ميزة على نطاق محدود. ويظل النطاق نطاقًا لميزة، وليس محددًا عامًا لرابطة حرفية واحدة مسماة. HarfBuzz: hb_feature_t

تنتمي واجهة API هذه إلى طبقة مختلفة عن CSS العادي للصفحات. فآلية HarfBuzz الموثقة تمرر طلبات الميزات إلى hb_shape(). وتصف أمثلتها مخازن التشكيل وقواعد العثور على الخطوط، بدلًا من إضافة خيار إلى ورقة أنماط المتصفح. بالنسبة إلى مهمة تسمية الويب على جهاز Mac هذه، فإن إدخال مسار تشكيل مخصص سيضيف عملًا يتجاوز الاستثناء المضمن. HarfBuzz: ميزات OpenType

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

المصادر