ForHosting KIT · المستندات وملفات PDF

اقتراح ارتفاع سطر CSS حسب حجم الخط ونوع المحتوى

يحصل نص المتن بحجم 16 px على ارتفاع سطر 1.5 أي 24 px، بينما تستخدم العناوين 1.2 والتعليقات 1.4: أدخلوا حجم الخط ونوع النص وانسخوا قيمة بداية جاهزة لتنسيقكم. مجاني في متصفحكم.

مجاني
يعمل في متصفحك
دون تسجيل
بياناتك لا تغادر جهازك

شغّل الأداة مجانًا اطّلع على الـAPI

استخدمها من الويبAPIالبريدTelegramالتطبيق قريبًا

مثال محلول

إذا أدخلت

حجم الخط: 16
نوع المحتوى: Body text

تحصل على

حجم الخط (px): 16
النسبة الموصى بها: 1.5
ارتفاع السطر (px): 24
Css: line-height: 24px;

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

اختاروا وظيفة المحتوى قبل تحديد التباعد

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

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

افهموا النسبة وقيمة البكسل في النتيجة

تُحسب التوصية بضرب حجم الخط الموجب بوحدة بكسل CSS في النسبة الثابتة لنوع المحتوى المختار. يستخدم متن بحجم 16 بكسلاً نسبة 1.5 فينتج 24 بكسلاً، بينما يستخدم عنوان بحجم 32 بكسلاً نسبة 1.2 فينتج 38.4 بكسلاً. تكون النسبة بلا وحدة أفضل غالباً في بيئة الإنتاج لأنها تورّث تناسبياً عندما يتغير حجم خط العناصر التابعة.

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

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

اختبروا التوصية داخل التخطيط الحقيقي

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

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

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

إنها تمنحكم بداية منطقية قابلة للشرح والتكرار.

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

بدء مقياس طباعي

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

إنشاء وثائق التصميم

أنشئوا نسباً وقيم بكسل وتعليمات CSS متسقة لمكتبة مكونات أو ملف تسليم التصميم.

التحقق من أدوار النص

ارفضوا الأدوار غير المعروفة في المسارات الآلية بدلاً من قبول تباعد افتراضي من دون تنبيه.

الأسئلة الشائعة

ما النسب التي توصي بها الأداة؟

تستخدم 1.5 لنص المتن، و1.2 للعناوين، و1.4 للتعليقات.

هل أستخدم النسبة أم قيمة البكسل في CSS؟

تُورّث النسبة بلا وحدة بصورة أفضل عادةً، بينما تلائم البكسلات المواصفات الثابتة وتسليم التصميم.

هل تضمن النتيجة سهولة وصول النص؟

لا. إنها نقطة بداية؛ اختبروا الخط الحقيقي وعرض السطر والتخطيط والتكبير والمحتوى الفعلي.

ما ارتفاع السطر المناسب لنص بحجم 16 px؟

ارتفاع سطر 1.5، أي 24 px. يمتد نص المتن على عدة أسطر، وتساعد هذه المسافة الإضافية العين على الانتقال من نهاية سطر إلى بداية السطر التالي.

لماذا يكون ارتفاع سطر العناوين أضيق من الفقرات؟

لأن العناوين أكبر وأقصر وغالبا ما تشغل سطرا أو سطرين. وتحافظ النسبة 1.2 على تماسك العنوان المنقسم، فيحصل عنوان بحجم 32 px على 38.4 px.

أدوات ذات صلة

للمطوّرين — الوصول عبر API

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

الـEndpoint

POSThttps://api.kit.forhosting.com/doc/line-height-recommend

صادِق على طلبك بترويسة Bearer، وأرسل طلب POST واحدًا لتدخل مهمتك قائمة التنفيذ فورًا؛ ثم تستلم النتيجة عبر webhook أو رابط موقّع.

استدعِ الخدمة من بيئتك

curl -X POST https://api.kit.forhosting.com/doc/line-height-recommend \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"font_size":16,"content_type":"body_text"}'

const res = await fetch("https://api.kit.forhosting.com/doc/line-height-recommend", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "font_size": 16,
    "content_type": "body_text"
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/doc/line-height-recommend",
    headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
    json={
    "font_size": 16,
    "content_type": "body_text"
},
)
task_id = res.json()["task_id"]

<?php
$res = file_get_contents("https://api.kit.forhosting.com/doc/line-height-recommend", false, stream_context_create([
  "http" => [
    "method"  => "POST",
    "header"  => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
    "content" => '{"font_size":16,"content_type":"body_text"}',
  ],
]));
$task = json_decode($res, true);

body := bytes.NewBufferString(`{"font_size":16,"content_type":"body_text"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/doc/line-height-recommend", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)

مثال على الطلب

{
  "font_size": 16,
  "content_type": "body_text"
}

مثال على الاستجابة

{
  "task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
  "type": "doc.line_height_recommend",
  "status": "queued",
  "_links": {
    "result": "/tasks/tsk_…/result"
  }
}

الواجهة غير متزامنة: تستلم task_id فور الإرسال، ويمكنك الاستعلام عن الحالة بمعدل طلب واحد في الثانية.

الأسعار

لكل طلب$0.002

السعر معلن كما تراه: لا tokens ولا نظام نقاط؛ وإن فشلت المهمة فلن تُحاسَب عليها.

الحدود

`max_mb`	25
`max_pages`	200

الأخطاء

HTTP	الرمز	المعنى
`401`	`unauthorized`	مفتاح الوصول مفقود أو غير صالح؛ تحقق من ترويسة Bearer في طلبك.
`402`	`insufficient_balance`	رصيدك لا يكفي لتنفيذ هذه المهمة؛ أعد شحن الرصيد ثم أعد المحاولة.
`404`	`unknown_type`	نوع المهمة المطلوب غير موجود في الكتالوج — راجع الاسم المرسل في الطلب.
`429`	`rate_limited`	تجاوزت الحد المسموح من الطلبات؛ انتظر قليلًا ثم أعد المحاولة.

ملاحظات تقنية

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

اختاروا وظيفة المحتوى قبل تحديد التباعد

اختاروا body_text للفقرات والمقالات والأوصاف، وheading للعناوين ورؤوس الأقسام، وcaption لملاحظات الصور والمصادر والتعليقات الثانوية القصيرة. تحوّل الصيغة body text إلى body_text، لكن أي نوع آخر غير معروف ينتج خطأً صريحاً بدلاً من تطبيق قيمة افتراضية صامتة.

افهموا النسبة وقيمة البكسل في النتيجة

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

اختبروا التوصية داخل التخطيط الحقيقي

يتاح الاستخدام التفاعلي في المتصفح، وتبلغ كلفة طلب API الواحد $0.002؛ ويستخدم المساران الوظيفة الحتمية نفسها.

أسئلة تقنية

ما أنواع المحتوى المعروفة؟

القيم المقبولة هي body_text أو body text، وheading، وcaption. تعيد القيم الأخرى invalid_input.

ما كلفة طلب API؟

تبلغ كلفة كل طلب API مقدار $0.002. تتاح أداة المتصفح للاستخدام التفاعلي.

اطّلع على توثيق KIT الكامل ←

شغّل الأداة مجانًا

مثال محلول

اختاروا وظيفة المحتوى قبل تحديد التباعد

افهموا النسبة وقيمة البكسل في النتيجة

اختبروا التوصية داخل التخطيط الحقيقي

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

بدء مقياس طباعي

إنشاء وثائق التصميم

التحقق من أدوار النص

الأسئلة الشائعة

أدوات ذات صلة

للمطوّرين — الوصول عبر API

الـEndpoint

استدعِ الخدمة من بيئتك

مثال على الطلب

مثال على الاستجابة

الأسعار

الحدود

الأخطاء

ملاحظات تقنية

اختاروا وظيفة المحتوى قبل تحديد التباعد

افهموا النسبة وقيمة البكسل في النتيجة

اختبروا التوصية داخل التخطيط الحقيقي

أسئلة تقنية

شكرًا