تحويل البكسل إلى نسبة مئوية لحجم خط CSS

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

حوّلوا تصميمًا قائمًا بالبكسل بدقة

ابدؤوا بحجم الخط الذي تريدون مطابقته وبحجم الخط المحسوب للعنصر الذي سيصبح أبًا له. تقسم الحاسبة حجم البكسل على حجم العنصر الأب، ثم تضرب تلك النسبة في 100. فعلى سبيل المثال، يصبح حجم عنصر ابن مقداره 18 بكسل داخل أب حجمه 16 بكسل مساويًا لـ112.5 بالمئة. يمكنكم لصق قيمة CSS الناتجة مباشرة في تعريف font-size. ويهم قياس العنصر الأب لأن النسب المئوية لا تصف حجمًا ماديًا مطلقًا، بل تصف علاقة ضمن سلسلة التوارث. فإذا تغير الأب لاحقًا من 16 بكسل إلى 20 بكسل، كبر معه الابن المعرّف بنسبة 112.5 بالمئة. استخدموا حجم الخط الفعلي للأب المباشر، لا قيمة root أو body غير المرتبطة به، إلا إذا كان ذلك العنصر هو فعلًا الأب الذي يرث الابن حجم خطه المحسوب. يحدد خيار الدقة عدد المنازل العشرية المحتفظ بها، بما يوازن بين مطابقة التصميم ووضوح قيم ورقة الأنماط. وتبقى النتائج الصحيحة موجزة من دون أصفار زائدة في نهايتها.

افهموا كيفية عمل نسب حجم الخط في CSS

يُحتسب حجم الخط المعبر عنه بنسبة مئوية استنادًا إلى حجم الخط المحسوب للعنصر الأب. تعني 100 بالمئة الحجم نفسه، وتعني 50 بالمئة نصفه، وتعني 150 بالمئة مرة ونصفًا منه. يجعل هذا السلوك الخطوط تستجيب طبيعيًا للتغييرات الموروثة، لكن التداخل قد يؤدي أيضًا إلى تراكم النسب. فإذا ضُبطت حاوية على 125 بالمئة وضُبط ابن داخلها كذلك على 125 بالمئة، صار حجم الابن 156.25 بالمئة من الحجم خارج المستويين. تحسب الأداة علاقة واحدة في كل مرة، لذلك أدخلوا دائمًا حجم الأب في المستوى الدقيق الذي سيوضع فيه التعريف الجديد. تعبّر النسب المئوية ووحدات em عن النسبة نفسها إلى الأب في خاصية font-size، غير أن الصياغة والأعراف المتبعة في أنظمة التصميم تختلف. تعيد هذه الأداة صياغة مئوية تحديدًا، مما يجعل علاقات المقاييس واضحة فورًا لمن يراجع ورقة أنماط أو يحول مواصفات بالبكسل إلى قواعد CSS قابلة للتوارث.

استخدموا النتيجة بأمان في نظام الخطوط

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