خلفية نمط الشبكة بصيغة SVG

مم تتكون خلفية النمط

يحتوي الملف الناتج على بلاطة صغيرة واحدة معرفة مرة واحدة كنمط، ومستطيل يملأ اللوحة بها. ولأن المتصفح يكرر البلاطة، يبقى الملف بضع مئات من البايتات سواء احتوت الشبكة على 20 خلية أو 2,000. يرسم المستطيل الأول لون الخلفية، ويرسم المستطيل الثاني الخطوط فوقه.

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

اختيار قيم تعمل كخلفية

يجب أن تدعم الخلفية النص الذي يعلوها. هذه نقاط بداية آمنة:

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

مثال عملي

بالنسبة لقسم رئيسي عرضه 1200 بكسل وارتفاعه 800 بكسل، تعطي خلية 40 بكسل 30 عمودا و20 صفا، أي 600 خلية. ولأن 1200 و800 يقبلان القسمة على 40، تنتهي الشبكة بشكل نظيف عند الحافتين. مع خلية 50 بكسل تحصل على 24 في 16 خلية، وهي نظيفة أيضا. أما خلية 45 بكسل فتترك خلية جزئية على اليمين والأسفل، لأن 1200 مقسومة على 45 تساوي 26.67.

استخدام النتيجة

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

مطابقة الخلفية مع التخطيط

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