ترقيم آلي للعناصر والصور باستخدام CSS Counters

عند كتابة نص أو مقال ما، فأنت في الأغلب ستضيف له بعض الصور، أو الفيديو أو رسومات لتوضح المحتوى بشكل أكبر. والأغلب أنك ستضيف لكل منه نصا تقوم فيه بشرح مفهوم الصورة، وقد ترغب بترقيم الصور حتى لا يضيع القارئ، وهذا ما سنقوم به عبر استخدام عنصر <figure> مع المُرقمات (counters).

عنصر figure

إن عنصر <figure> صُمم ليستخدم جنبا إلى جنب مع <figcaption> لاحتواء الصور وما شابه. هذا هو شرح <figure> في وصف لغة HTML الرسمي:

اقتباس

عنصر figure يمثل وحدة محتوى، والتي يمكن أن تدمج معها شرحا caption بشكل اختياري. ويقوم العنصر بإحتواء نفسه وإضافته للمحتوى، وإزالته عن المحتوى لن تؤثر على مضمون المحتوى.
W3C Specification

هكذا نقوم بإضافة figure :

<figure>
  <img src="path/to/your/image.jpg" alt="" />
  <figcaption>Here is the legend for your image<figcaption>
</figure>

هناك بعض الملاحظات بشأن العنصر:

عنصر <figcaption> اختياري.
تستطيع استخدام عنصر <figcaption> واحد فقط داخل عنصر <figure>.
تستطيع إدراج أيّ عدد تشاء من العناصر داخل <figure>.
إذا كنت ستدرج صورة فتستطيع ترك alt فارغة إذا كنت ستدرج <figcaption> حتى لا تقوم برامج قراءة الشاشة بقراءة نفس المحتوى مرّتين.

للمزيد من المعلومات حول <figure> ألق نظرة على هذه المصادر:

أمثلة:

إذا أردت أن تظهر شيفرة برمجية ما، فتستطيع استخدامه بهذه الطريقة:

<figure>
    <code>body { background: white; }</code>
    <figcaption>Some illustrated code with figure<figcaption>
</figure>

بدل إدراج صورك بهذه الطريقة:

<img src="cute-kitty.jpg" alt="This is a cute kitty!" />

تستطيع إدراجها بهذه الطريقة:

<figure>
    <img src="cute-kitty.jpg" alt="" />
    <figcaption>This is a cute kitty!<figcaption>
<figure>

دعم المتصفحات

عنصر <figure> يعتبر من أحد عناصر HTML5 الجديدة، ولذا فهو ليس مدعوما من قبل المتصفحات القديمة (IE 8) ولكن لا أحد يهتم صراحة. ولكن إن كنت مُهتمًا بدعم المُتصفّحات القديمة فتستطيع استخدام html5shiv ليظهر الوسم بشكل عادي.

المُرقّمات في CSS

أحد أكثر خصائص CSS ديناميكة وأقلها شهرة هي CSS Counter فهي تسمح لك بترقيم العناصر ديناميكيا عبر CSS فحسب، بدون الاستعانة بأيّ شيء آخر.
استخدام المرقمات يكون عبر خاصيتين وقيمة وهما:

counter-reset والتي تستخدم لتهيئة أو إعادة تهيئة مرقم أو أكثر.
counter-increment والتي تستخدم لزيادة قيمة مرقم أو أكثر.
()counter وهي قيمة تستخدمها مع before:: أو after:: والتي تقبل اسم المرقم كقيمة من أجل أن تظهر القيمة.

الأمر بسيط. كل ما تقوم به هو تهيئة عدّاد ما بالاسم الذي تريده، ثم تحدد لمجموعة عناصر ما أن تقوم بزيادة تلك القيمة كلنا ظهر أحدها. ويمكن إظهار هذه القيمة عبر CSS باستخدام before:: و after::.

مثال بسيط للعداد:

/* 1. نقوم بتهيئة المرقم (أو العداد) */
body {
  counter-reset: thisSuperCoolCounter;
}

/* 2. نحدد أنه في كل مرة يظهر فيها هذا العنصر نرفع قيمة المرقم */
.myAwesomeElement {
  counter-increment: thisSuperCoolCounter;
}

/* 3. نقوم بإظهار قيمة العداد قبل العنصر */
.myAwesomeElement:before {
  content: counter(thisSuperCoolCounter);
}

مثال بسيط

حسنا نعود للموضوع الأساسي الذي يدور حوله الدرس، نريد ترقيم صورنا حتى تظهر قبلها Fig. 2 – … Fig. 1 – … وهكذا.

.article {
    counter-reset: figures;
}

.figure {
    counter-increment: figures;
}

.figure figcaption:before {
    content: 'Fig. ' counter(figures) ' - ';
}

إعداد كل شيء

الأساسيات

بعد أن فهمنا كيف نستخدم عنصر <figure> وكيف تعمل المرقمات في CSS حان الوقت لاستخدامها في ترقيم الصور.

نقوم بإعداد وسم <figure> ببعض الأمور البسيطة:

.figure {
    padding: 0.9em;
    border: 3px solid #f5bca8;
    background: #fff;
    margin: 0 auto 1em;
}

ثم نريد أن نحاذي الصور في وسط عنصر <figure> ونمنعهم من الخروج عن حجم الحاوي لذا نضيف التالي:

.figure img {
    margin: 0 auto;
    display: block;
    max-width: 100%;
}

الآن بالنسبة لوصف الصّورة (caption) وسنجعلها تبرز أكثر بتوسيطها وجعل الخط بارزًا.

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

.figure figcaption {
    font-weight: 700;
    font-size: 0.8em;
    padding: .5em;
    text-align: center;
    color: #fff;
    background: #f5bca8;
}

الترقيم

حان الوقت لإضافة الترقيم للصور، وإضافته سهلة كما رأينا سابقا.

.article {
    counter-reset: figures;
}

.figure figcaption {
    counter-increment: figures;
}

.figure figcaption:before {
    content: 'Fig. ' counter(figures) ' - ';
}

الإضافات البسيطة

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

.figure-left {
    float: left;
    margin: 0 1em .5em 0;
    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content;
}

.figure-right {
    float: right;
    margin: 0 0 .5em 1em;
    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content;
}

إنّ min-content هي قيمة صحيحة لكل من الخواص التالية min-height min-width max-height max-widthheight width.

في حالتنا، نريد من figure أن يكون بأصغر قدر ممكن، أو بالأحرى نريد من عرضه أن يكون هو نفس عرض الصورة التي هي بداخله. لأن figure هو عنصر بحجم كامل (block) فسوف يتمد عرضه إلى كامل الحاوي (100%).
نستطيع استخدام float: left أو display: inline-block لجعل عرضه يقل إلى أكبر عنصر داخله، ولكن ماذا سيحدث لو كان الوصف أكبر من حجم الصورة، فستحدث مشكلة.

نستطيع أن نحدد عرض العنصر يدويًّا، ولكن الأمر غير منطقي وغير ديناميكي، لهذا استخدمنا قيمة min-content، فهي بكل بساطة تخبر عنصر figure أن يقلل من حجمه إلى حجم الصورة مثال:

See the Pen pJLXde by Hsoub Academy (@HsoubAcademy) on CodePen.

الخاصية مدعومة من قبل فيرفكس باستخدام -moz- و chrome باستخدام -webkit-.
المتصفحات التي لا تدعم الخاصية ستتصرف كما هو متوقع منها، لن يتم تعيين أيّ عرض وسيكون عرضه هو عرض أكبر عنصر داخله.

ملاحظة: يوجد قيم أخرى وهي max-content و fit-content و available. اطلع على التوثيق للمزيد من المعلومات.

وأخيرًا وليس آخرا، نريد أن نغير أو نحذف العرض الأقصى الذي حددناه للصور التي ستميل لليمين أو لليسار، فإذا أردت أن تأخذ الصور حجمها الطبيعي فاستخدم max-width: none وإذا أردت عرضا أقصى فاستخدم التالي:

.figure-right img,
.figure-left img {
    max-width: 300px; /* عدل على حسب حاجتك */
}

توافق الشاشات الصغيرة

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

@media (max-width: 767px) {
    .figure-left,
    .figure-right {
        float: none;
        margin: 0 0 1em 0;
        width: 100%;
    }

    .figure img {
        max-width: 100%;
    }
}

الاستخدام

استخدام ما قدمناه شيء بسيط، إما أن تستخدم صورا تستغل كامل المساحة عبر استخدام figure. أو تريد أن تحاذي الصور لليمين أو لليسار فتستخدم كل من figure. وfigure-left. أو figure-right.

<figure class='figure'>
	<img src="path/to/your/image.jpg" alt="" />
	<figcaption>Here is the legend for your image<figcaption>
</figure>

<figure class='figure figure-left'>
	<img src="path/to/your/image.jpg" alt="" />
	<figcaption>Here is the legend for your image<figcaption>
</figure>

<figure class='figure figure-right'>
	<img src="path/to/your/image.jpg" alt="" />
	<figcaption>Here is the legend for your image<figcaption>
</figure>