كيفية محاذاة النص بصورة قطرية

طلب أحد عملاء OSTraining طريقة لمحاذاة النص بجوار صورة قطرية ، مع الاحتفاظ بمسافة بين كلا العنصرين.

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

بعد التحدث مع العميل توصلنا إلى حل أكثر أناقة ...

حالة الاستخدام

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

الحل

يمكننا إضافة عناصر div فارغة عائمة على اليمين بقيم عرض ديناميكي لإجبار النص على عدم تراكب الصورة. لاحظ ، في هذا المثال ، تمت إضافة الصورة كخلفية باستخدام CSS.

HTML

يبدو HTML لهذا المثال بهذه الطريقة:

 <div>    <div class="spacing"></div>    <div class="spacing"></div>    <div class="spacing"></div>    <div class="spacing"></div>    <div class="spacing"></div>    <div class="spacing"></div>    <div class="spacing"></div>    <div class="spacing"></div>    <div class="spacing"></div>    <div class="spacing"></div>    <div class="spacing"></div>    <div class="spacing"></div>    <div class="spacing"></div>    <div class="spacing"></div>    <p>A buch of dummy text goes here...</p> </div>

يمكنك ملاحظة العديد من divs الفارغة مع فئة التباعد . هذه العناصر مع بعض CSS تولد التباعد بين النص والصورة.

عدد تباعد divs يساوي عدد أسطر النص المطلوبة لملء ارتفاع الصورة. في هذا المثال ، يجب تغطية الصورة بـ 14 سطرًا.

CSS

سأقسم CSS المطلوب إلى عدة أجزاء للحصول على شرح أفضل.

 #container {  background-image: url(bg.png);  background-repeat: no-repeat;  background-position: right top;  background-size: 300px auto;  min-height: 300px; }

يعرّف الصورة كخلفية بموضع وحجم محددين.

 #container p {  line-height: 22px;  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;  font-size: 14px; }

يشير محدد #container p إلى النص. من المهم للغاية تحديد حجم الخط وارتفاع الخط لحساب قيم الخصائص الأخرى لاحقًا.

 .spacing {  float: right;  clear: right;  height: 22px; }

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

 .spacing:nth-child(1) {  width: 305px; } .spacing:nth-child(2) {  width: 283px; } .spacing:nth-child(3) {  width: 261px; } .spacing:nth-child(4) {  width: 239px; } .spacing:nth-child(5) {  width: 217px; } .spacing:nth-child(6) {  width: 195px; } .spacing:nth-child(7) {  width: 173px; } .spacing:nth-child(8) {  width: 151px; } .spacing:nth-child(9) {  width: 129px; } .spacing:nth-child(10) {  width: 107px; } .spacing:nth-child(11) {  width: 85px; } .spacing:nth-child(12) {  width: 63px; } .spacing:nth-child(13) {  width: 41px; } .spacing:nth-child(14) {  width: 19px; }

الكود أعلاه هو الجزء الممتع الذي قد يتطلب استخدام الآلة الحاسبة.

سيتم تطبيق قيمة العرض المختارة لـ .spacing: nth-child (1) على أول div مع فئة تباعد ، بنفس الطريقة . رقم 14.

إن سبب تحديد القيم الديناميكية من الأعلى إلى الأسفل لكل عنصر div فارغ على اليمين يجعل من الممكن الحفاظ على محاذاة النص إلى اليسار دون تراكب الصورة.

بعد قولي هذا ، كيف يمكننا حساب عرض كل من هذه divs الفارغة؟ تتطلب الإجابة معادلة صغيرة بناءً على قيم:

• ارتفاع السطر للنص (22 بكسل في المثال الخاص بي)
• حجم الخلفية (300 بكسل في هذا المثال)

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

دعم متجاوب

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

شاهد العرض

المكافأة: أقل

أحد البدائل للانتقال مباشرة إلى CSS هو LESS. لدينا برنامج تعليمي إذا كنت جديدًا على LESS.

يمكنك إنشاء نفس النتيجة باستخدام LESS لإنشاء قيم عرض متعددة ديناميكيًا لكل div مع فئة تباعد بسهولة دون الحاجة إلى القلق بشأن الرياضيات.

 @textHeight: 22px; @backgroundWidth: 300px; @extraSpacing: 5px; @initialWidth: @backgroundWidth + @extraSpacing; @textLines: @backgroundWidth / @textHeight;

حدد ارتفاع النص وعرض الخلفية من خلال المتغيرات.

 #container {    background-image: url(bg.png);    background-repeat: no-repeat;    background-position: right top;    background-size: @backgroundWidth auto;    min-height: @backgroundWidth; }

خصائص الحاوية.

 #container p {    line-height: @textHeight;    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;    font-size: @textHeight - 8; } .spacing {    float: right;    clear: right;    height: @textHeight; }

يتم حساب خصائص النص والتباعد ديناميكيًا بناءً على بعض المتغيرات.

 .generate-spacing(@i, @end) when (@i <= @end) {    .spacing:nth-child(@{i}) {        width: @initialWidth - ((@i - 1) * @textHeight);    }    .generate-spacing((@i + 1), @end); } .generate-spacing(1, @textLines);

الحلقة التي تولد العرض الديناميكي لجميع عناصر div الفارغة.

اختبر هذا الرمز في Codepen