يتضمن تخطيط أي نص إعلامي تضمين الارتباطات التشعبية أو نقاط التثبيت الدلالية. تتم إضافة هذه العناصر باستخدام العلامة "a" (المرساة). تعرض المتصفحات الحديثة بشكل افتراضي عنصرًا مشابهًا. في كثير من الأحيان، يفضل مصممو التخطيط أو مصممو الويب إما تغيير هذا النمط أو إزالته تمامًا.

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

إذا تقرر إزالة التسطير من الروابط، فستحتاج إلى بعض المعرفة حول بنية صفحة الإنترنت، أي CSS.

إزالة الرابط الذي يسطير من الموقع بأكمله

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

زخرفة النص: لا شيء؛

سيؤدي هذا الخط الصغير إلى إزالة التسطير تمامًا من جميع العناصر المكتوبة باستخدام العلامة "a" في جميع أنحاء الموقع بأكمله.

ولكن ماذا لو لم يكن لديك حق الوصول إلى ملف CSS؟

في هذه الحالة، يُنصح باستخدام علامة النمط في بداية المستند. يعمل بنفس ملف CSS. من أجل تطبيق الأنماط، تحتاج إلى إضافة بناء في بداية المستند (أو صفحة HTML)، حيث تنطبق القواعد المعتادة لأنماط CSS.

تنطبق هذه الأنماط على صفحة معينة فقط. ولن تنطبق على الأقسام أو المستندات الأخرى بالموقع.

قم بإزالة الرابط الذي تحته خط عند التمرير

ولكن ماذا لو كنت بحاجة إلى إزالة الرابط الذي تحته خط عند التمرير؟ يمكن أن يساعدنا CSS في هذه الحالة أيضًا. سيبدو الكود كالتالي:

زخرفة النص: لا شيء؛

إنها الفئة الزائفة ":hover" المسؤولة عن تزيين العناصر عند المرور فوقها.

من خلال الجمع بين هذين الخيارين، يمكننا جعل الرابط الذي تحته خط يظهر فقط عند التمرير، وإلا فإنه سيبدو كنص عادي:

زخرفة النص: لا شيء؛

زخرفة النص: تسطير؛

استخدام المعرفات والفئات

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

هناك عدة خيارات لحل هذه المشكلة.

يمكنك إزالة التسطير من الروابط المضمنة. على الرغم من أن هذا لا ينصح به بشكل صارم من وجهة نظر تحسين الموقع.

للقيام بذلك، تحتاج إلى تحديد معلمة النمط مباشرةً في علامة الارتباط:

الخيار الثاني هو أكثر قبولا.

نقدم فئة أو معرفًا إضافيًا للعنصر ونخصص الأنماط التي نحتاجها لهذه المحددات:

يتم كتابة الفصل بنقطة قبل اسمه:

لا شيء_ديكور(

زخرفة النص: لا شيء؛

يتم الإشارة إلى المعرف بالعلامة #:

#لا_ديكور(

زخرفة النص: لا شيء؛

تنطبق هذه القاعدة على كل من ملف CSS وعلامة النمط

تغيير نمط عرض الروابط في النص

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

وهذا أيضًا أمر بسيط جدًا:

لون :*حدد اللون المطلوب بأي تنسيق (*red, #c2c2c2, rgb (132, 33, 65)*)*;

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

استبدال التصميم القياسي

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

نمط زخرفة النص:

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

يمكنك أيضًا تغيير موضع السطر بالنسبة للنص:

يمكن أن يأخذ بناء سطر زخرفة النص القيم التالية:

واللون (يجب عدم الخلط بينه وبين لون النص!):

سطر-زخرفة النص: (أي لون بأي شكل * أحمر، #c2c2c2، rgb (132، 33، 65)*).

للراحة، يمكن كتابة المواضع الثلاثة معًا في البناء:

زخرفة النص: أحمر، خطي، مموج.

من المؤلف:يعد تصميم خطوط الارتباط أمرًا صعبًا للغاية، وأنا دائمًا أنسى الطريقة الأفضل في أي موقف. ولحسن الحظ، سيساعدنا جون جيمسون على فهم هذا بسرعة في مقالته.

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

تسطير رفيع باللون الأسود مع وجود مسافات حول الحروف مع وسائل شرح سفلية - عمل بواسطة Marcine Witchery من المقالة إنشاء رابط تسطير على الوسيط.

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

الأهداف

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

أن تكون موجودة تحت خط الأساس؛

تخطي الحروف السفلية؛

تغيير اللون والسمك والأنماط؛

انتقل إلى السطر الجديد.

العمل مع أي خلفية.

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

اقتراب

إذن ما هي الأساليب المتوفرة لدينا لوضع خط تحت النص؟ تذكرت ما يلي:

زخرفة النص؛

الصورة الخلفية؛

مرشحات SVG؛

Underline.js(canvas);

زخرفة النص-*

دعنا نراجع القائمة بأكملها ونفكر في جميع إيجابيات وسلبيات كل نهج.

خاصية زخرفة النص

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

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

الايجابيات

سهل الاستخدام؛

تقع تحت خط الأساس؛

يتخطى السلالات بشكل افتراضي في Safari وiOS؛

يقفز إلى سطر جديد؛

يعمل مع أي خلفية.

السلبيات

لا يتخطى نسل الحروف في المتصفحات الأخرى؛

لا يمكن تغيير اللون والسمك والأنماط.

خاصية أسفل الحدود

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

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

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

يوجد حاليا 4 خصائص للتسطير التصميم. أفضل بكثير من مجرد زخرفة النص.

الايجابيات

يمكنك استخدام خاصية الانتقال وتحريك اللون والسمك؛

ينتقل إلى أسطر جديدة افتراضيًا إذا لم يكن العنصر مضمّنًا؛

السلبيات

يقع الخط بعيدًا جدًا ويصعب تحريكه؛

يلزم استخدام الكثير من الخصائص غير الضرورية لجعل التسطير يبدو جيدًا؛

تمييز النص بشكل سيئ عند استخدام ظل النص.

خاصية ظل الصندوق

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

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

الايجابيات

يمكن وضعها تحت خط الأساس.

يمكنك تخطي وسائل الشرح باستخدام ظل النص؛

يمكنك تغيير اللون والسمك.

يقفز إلى خطوط جديدة.

السلبيات

لا يمكن تغيير الأنماط؛

لا يعمل مع جميع الخلفيات.

خاصية صورة الخلفية

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

العرض التوضيحي أدناه لا يستخدم التدرج الخطي. لإنشاء تأثير رائع، يمكنك استخدام صورتك الخاصة.

الايجابيات

يمكن وضعها تحت خط الأساس.

يمكنك تخطي وسائل الشرح السفلية باستخدام ظل النص؛

يمكنك تغيير اللون والسمك (حتى بمقدار نصف بكسل) والأنماط؛

يعمل مع الصور المخصصة.

يقفز إلى خطوط جديدة؛

يعمل مع أي خلفية طالما أنك لا تستخدم ظل النص.

السلبيات

قد يختلف حجم الصورة حسب الدقة والمتصفح ومستوى التكبير/التصغير.

مرشحات SVG

هذه هي الطريقة التي لعبت بها. يمكنك إنشاء عنصر مرشح SVG مضمن لرسم الخط وتوسيع النص لإخفاء أجزاء الخط التي يجب أن تكون شفافة. يمكن إعطاء الفلتر معرفًا والإشارة إليه في CSS باستخدام عامل التصفية: url('#svg-underline').

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

وهذه هي الطريقة التي تبدو بها في Chrome وFirefox:

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

الايجابيات

تقع تحت خط الأساس؛

يتخطى القادة السفليين؛

يمكنك تغيير اللون والسمك والأنماط.

يعمل على أي خلفية.

السلبيات

لا يقفز إلى أسطر جديدة؛

لا يعمل في IE وEdge وSafari، ولكن يمكنك تحديد زخرفة النص كإجراء احتياطي. تبدو الخطوط المسطرة في Safari رائعة في حد ذاتها.

Underline.js (قماش)

Underline.js هي مكتبة مذهلة. أنا معجب بما تمكن Wenting Zhang من فعله باستخدام JS والاهتمام بالتفاصيل. إذا لم تكن قد شاهدت العرض التوضيحي التقني لـ Underline.js بعد، فتوقف لمدة دقيقة وألقِ نظرة. هناك خطاب رائع مدته تسع دقائق على الإنترنت حول مبادئ العمل، وسأعيد سرده لك بسرعة الآن. يتم رسم التسطير باستخدام قماش. نهج جديد تماما يعمل بشكل جيد بشكل مدهش.

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

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

خصائص زخرفة النص-*

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

لون زخرفة النص

زخرفة النص تخطي

نمط زخرفة النص

لا تفرح في وقت مبكر، فأنت تعرف عن دعم المتصفح.

خاصية لون زخرفة النص

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

خاصية زخرفة النص-تخطي

خاصية text-decoration-skip هي المسؤولة عن تخطي بالونات التذييل في النص الذي تحته خط.

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

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

خاصية زخرفة النص

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

في الوقت الحالي، تعمل الخاصية text-decoration-style على متصفح Firefox فقط، وفيما يلي لقطة شاشة:

مجموعة من الخطوط أحادية اللون تبدو متشابهة؟

ما هو الخطأ؟

تعد خصائص text-decoration-* أكثر سهولة من الخصائص الأخرى لتصميم التسطير. ومع ذلك، إذا ألقيت نظرة مختلفة على المتطلبات التي قدمناها سابقًا، ستلاحظ أنه باستخدام هذه الخصائص لا يمكنك تغيير السُمك والموضع. وبعد قليل من البحث وجدت هاتين الخاصيتين:

عرض تسطير النص

نص تسطير الموقف

يبدو أنه تم إسقاط هذه الخصائص من إصدار مبكر من CSS بسبب عدم الاهتمام بها. لم يتم استخدامها قط. مهلا، هذا ليس خطأي.

الاستنتاجات

إذن ما هي أفضل طريقة لتسطير النص؟ كل هذا يتوقف على عوامل مختلفة.

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

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

ولتخطي وسائل شرح الحروف على الخلفيات أو الصور المتدرجة، حاول استخدام مرشح SVG. أو لا تخلط هذه الخلفيات مع التسطير. في المستقبل، عندما يتحسن دعم المتصفح، سيكون من الممكن استخدام خصائص text-decoration-*.