ارتفاع السطر على شبكة الأساس
خط بحجم 16 بكسل ونسبة 1.5 على شبكة من 8 بكسل يعطي ارتفاع سطر قدره 24 بكسل: ثلاثة صفوف من الشبكة تمامًا، فيستقر كل سطر على القضبان نفسها. وإذا لم تقع القيمة المثالية على الشبكة، تُضبط على عدد صحيح من الصفوف. مجاني في متصفحك.
- مجاني
- يعمل في متصفحك
- دون تسجيل
- بياناتك لا تغادر جهازك
شغّل الأداة مجانًا
مثال محلول
- حجم الخط
- 16
- الشبكة
- 8
- النسبة المفضلة
- 1.5
- الالتصاق
- nearest
- ارتفاع السطر المثالي
- 24
- ارتفاع السطر
- 24
- النسبة
- 1.5
تحافظ شبكة خط الأساس على كل سطر نصي فوق القضبان الأفقية الخفية نفسها، بحيث تتشارك الفقرات والتعليقات والتخطيطات متعددة الأعمدة إيقاعًا عموديًا واحدًا من أعلى الصفحة إلى تذييلها. يختار المصممون ومهندسو الواجهة وحدة شبكة —غالبًا أربعة أو ستة أو ثمانية بكسل— ويحتاجون ارتفاع سطر يكون مضاعفًا تامًا لتلك الوحدة، لا نسبة عائمة تنزاح نصف بكسل في كل سطر. تأخذ حاسبة ارتفاع السطر على شبكة الأساس حجم الخط والنسبة المفضّلة بلا وحدة وارتفاع صف الشبكة، ثم تُثبّت صندوق السطر المثالي على أقرب عدد صحيح من الصفوف (أو إلى الأعلى، أو إلى الأسفل). تحصلون على ارتفاع السطر المثبّت بالبكسل، والنسبة الفعلية للصقها في CSS، وعدد صفوف الشبكة التي يشغلها ذلك السطر، وما إذا كانت القيمة المثالية قد وقعت أصلًا على الشبكة.
كيف يعمل تثبيت ارتفاع السطر على شبكة الأساس
ابدؤوا من قاعدة ارتفاع السطر المألوفة بلا وحدة: اضربوا حجم الخط في نسبة مفضّلة مثل واحد فاصلة خمسة للحصول على صندوق سطر مثالي بنفس وحدة الخط (بكسل CSS في الغالب). هذا الناتج مريح للقراءة لكنه نادرًا ما يقع تمامًا على شبكة الأساس.
اقسموا ارتفاع السطر المثالي على ارتفاع صف الشبكة لتعرفوا كم صفًا يريد السطر أن يشغله؛ ثم طبّقوا وضع التثبيت. nearest يقرّب إلى أقرب عدد صحيح من الصفوف، وهو الافتراضي لنص الجسم عندما تريدون أقل تغيير بصري عن النسبة المفضّلة. up (السقف) يوسّع صندوق السطر دائمًا فلا يبدو النص أضيق من المثالي —مفيد للحواشي القانونية أو الأسطر الطويلة التي تحتاج تنفّسًا—. down (الأرضية) يضيّق نحو الشبكة عندما يجب حماية ميزانية عمودية ضيقة مثل ارتفاع بطاقة أو عمود طباعة.
بعد التثبيت، اضربوا عدد الصفوف الصحيح في وحدة الشبكة للحصول على ارتفاع السطر النهائي، واقسموا على حجم الخط لاستعادة النسبة بلا وحدة التي يمكن وضعها في خاصية CSS مخصّصة. يُفرض صف واحد على الأقل حتى لا تُسقط المدخلات المرضية ارتفاع السطر إلى صفر.
متى يفيد ضبط ارتفاع السطر على شبكة الأساس
تولّد أنظمة التصميم مقاييس المسافات والطباعة من ثابت شبكة واحد؛ واستدعاء هذه الحاسبة عندما يضيف المؤلفون حجمًا جديدًا يُبقي كل رمز لارتفاع السطر على القضبان دون جدول بيانات. تستخدم أنابيب الطباعة و PDF التي تسقط CSS على شبكات صفحة ثابتة منطق التثبيت نفسه لتطابق المعاينات على الشاشة اللوحة. تستفيد مواقع المحتوى التي تتصدر لارتفاع السطر على شبكة الأساس من أداة حية يتطابق مسارها المجاني في المتصفح بايتًا ببايت مع مسار الأتمتة.
التحقق الفاشل لا يستهلك الرصيد. أبقوا النسب المفضّلة معتدلة، وثبّتوا الذهبيات على الحقول المقربة، فتحصلون على إيقاع عمودي قابل للتكرار لرموز التصميم وعمال الحافة ومولّدات أدلة الأسلوب دون بناء محرك تخطيط خاص بكم.
حالات الاستخدام
توليد رموز التصميم ومقاييس الطباعة
عند إضافة حجم خط جديد إلى نظام تصميم، ثبّتوا النسبة المفضّلة على شبكة الأساس المشتركة ليبقى كل رمز لارتفاع السطر مضاعفًا صحيحًا لوحدة الشبكة.
تخطيطات متعددة الأعمدة والبطاقات
حاذوا صناديق سطور الجسم والتعليق والعناوين عبر الأعمدة والبطاقات المكدسة بحساب ارتفاعات سطر مثبّتة لكل حجم مقابل شبكة واحدة.
الإيقاع العمودي للطباعة و PDF
أسقطوا مقاييس طباعة الشاشة على خط أساس طباعة ثابت حتى تحافظ أنابيب CSS إلى PDF على تباعد الفقرات متسقًا مع شبكة الصفحة.
الأسئلة الشائعة
ما الفرق بين nearest و up و down؟
nearest يقرّب صندوق السطر المثالي إلى أقرب عدد صحيح من صفوف الشبكة. up يطبّق السقف دائمًا (تباعد أوسع). down يطبّق الأرضية (أضيق). عدد الصفوف لا يقل عن واحد أبدًا.
بم يختلف هذا عن حاسبة ارتفاع سطر بسيطة؟
الحاسبة البسيطة تضرب حجم الخط في نسبة فقط. هذه الأداة تثبّت ذلك الناتج أيضًا على شبكة أساس ليبقى الإيقاع العمودي متسقًا عبر الأحجام والأعمدة.
ما وحدة الشبكة التي أختارها؟
يختار المصممون عادة 4 أو 6 أو 8 بكسل ويبنون كل المسافات على هذا الرقم. أدخل الوحدة نفسها هنا فيكون كل ارتفاع سطر تحصل عليه مضاعفًا دقيقًا لها، لا نسبة تنزاح نصف بكسل مع كل سطر.
كيف أعرف أن نسبتي المفضلة تقع على الشبكة أصلًا؟
تخبرك النتيجة حين يقع ارتفاع السطر المثالي على عدد صحيح من الصفوف. عندها لا يتغير شيء: خط بحجم 16 بكسل بنسبة 1.5 على شبكة من 8 بكسل يبقى عند 24 بكسل، أي ثلاثة صفوف، بالنسبة نفسها.
هل أستخدم القيمة بالبكسل أم النسبة في تنسيقاتي؟
كلاهما يبقي النص على الشبكة. استخدم ارتفاع السطر المضبوط بالبكسل، أو النسبة الفعلية، أي هذا الارتفاع مقسومًا على حجم الخط، إذا كانت تنسيقاتك تستخدم ارتفاعات أسطر بلا وحدة.
أدوات ذات صلة
للمطوّرين — الوصول عبر API
كل ما في هذه الصفحة متاح برمجيًا. هذا القسم موجّه للفرق التقنية التي تريد ربط الأداة بأنظمتها الخاصة؛ بقية المستخدمين يمكنهم استخدام الأداة أعلاه مباشرة دون الحاجة لقراءة ما يلي.
الـEndpoint
صادِق على طلبك بترويسة Bearer، وأرسل طلب POST واحدًا لتدخل مهمتك قائمة التنفيذ فورًا؛ ثم تستلم النتيجة عبر webhook أو رابط موقّع.
استدعِ الخدمة من بيئتك
curl -X POST https://api.kit.forhosting.com/str/baseline-grid \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"font_size":16,"grid":8}'const res = await fetch("https://api.kit.forhosting.com/str/baseline-grid", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"font_size": 16,
"grid": 8
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/str/baseline-grid",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"font_size": 16,
"grid": 8
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/str/baseline-grid", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"font_size":16,"grid":8}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"font_size":16,"grid":8}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/str/baseline-grid", 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,
"grid": 8
}مثال على الاستجابة
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "str.baseline_grid",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}الواجهة غير متزامنة: تستلم task_id فور الإرسال، ويمكنك الاستعلام عن الحالة بمعدل طلب واحد في الثانية.
الأسعار
السعر معلن كما تراه: لا tokens ولا نظام نقاط؛ وإن فشلت المهمة فلن تُحاسَب عليها.
الأخطاء
| HTTP | الرمز | المعنى |
|---|---|---|
401 | unauthorized | مفتاح الوصول مفقود أو غير صالح؛ تحقق من ترويسة Bearer في طلبك. |
402 | insufficient_balance | رصيدك لا يكفي لتنفيذ هذه المهمة؛ أعد شحن الرصيد ثم أعد المحاولة. |
404 | unknown_type | نوع المهمة المطلوب غير موجود في الكتالوج — راجع الاسم المرسل في الطلب. |
429 | rate_limited | تجاوزت الحد المسموح من الطلبات؛ انتظر قليلًا ثم أعد المحاولة. |
ملاحظات تقنية
تغذي الحسابات النقية نفسها أداة المتصفح المجانية ومسار API المدفوع مسبقًا، فلا تختلف رموز التصميم في Figma وفي الشيفرة وفي دليل الأسلوب عند حالة حدّية في التقريب.
كيف يعمل تثبيت ارتفاع السطر على شبكة الأساس
عندما يساوي الناتج المثالي أصلًا عددًا صحيحًا من الصفوف، تضع الاستجابة on_grid بقيمة true حتى تستطيع أنابيب الرموز تخطّي إعادة الكتابة.
عقد الإدخال وحقول الاستجابة والتحقق
خط بثمانية عشر بكسل على الشبكة نفسها بنسبة واحد فاصلة خمسة يعطي مثاليًا سبعة وعشرين، يُثبّت nearest إلى أربعة وعشرين (ثلاثة صفوف، نسبة نحو واحد فاصلة ثلاثة ثلاثة) أو up إلى اثنين وثلاثين (أربعة صفوف) حسب snap. اقرنوا الأرقام بتحويل rem الخاص بكم إن اختلف حجم الجذر؛ يعمل هذا الطرف بالبكسل الخام فتبقى النتائج حتمية عبر البيئات. أرسلوا عبر POST جسم JSON برقمين موجبين محدودين إلزاميين: font_size (بكسل CSS للنص الذي تقيسونه) و grid (ارتفاع صف خط الأساس بنفس الوحدة). اختياريًا أرسلوا preferred_ratio وقيمتها واحد فاصلة خمسة عند الحذف، و snap ك nearest أو up أو down —تُقبل أسماء بديلة مثل round و ceil و floor—. قد تصل الحقول الرقمية كأرقام JSON أو سلاسل عشرية؛ القيم المفقودة والصفر والسالبة و NaN و Infinity تفشل ب invalid_input ولا تُفوتر. عند النجاح يعيد الحمولة font_size و grid و preferred_ratio و snap؛ ويبلّغ ideal_line_height قبل التثبيت؛ ويعيد line_height و ratio بعده؛ ويتضمن العدد الصحيح grid_rows؛ ويضبط on_grid عندما كان المثالي مضاعفًا للشبكة أصلًا؛ ويقدّم سلسلة formula قصيرة للتوثيق. مثال: خط بستة عشر بكسل على شبكة ثمانية بنسبة مفضّلة واحد فاصلة خمسة يعطي مثاليًا أربعة وعشرين، أي ثلاثة صفوف تمامًا، فيبقى line_height أربعة وعشرين والنسبة واحد فاصلة خمسة.
أين تثبت API لارتفاع السطر على شبكة الأساس جدواها
مكتبات المكوّنات التي تعرض مقالات متعددة الأعمدة أو بطاقات منتجات أو أشرطة جانبية للتوثيق تحتاج خطوط أساس متطابقة عبر نقاط التوقف —ومعالجة أحجام الخط دفعة عبر API تنتج جدولًا مستقرًا لنِسب مثبّتة ل Storybook والانحدار البصري. لأن التنفيذ parse نقي من المستوى A، يكلّف كل استدعاء ناجح السعر الأساسي المنشور $0.002 دون رموز نموذج ولا شبكة صادرة.
أسئلة تقنية
كيف أحسب ارتفاع سطر على شبكة الأساس؟
أرسلوا font_size و grid موجبين (واختياريًا preferred_ratio افتراضي 1.5، و snap: nearest أو up أو down). تعيد API قيمة line_height كمضاعف صحيح للشبكة والنسبة الفعلية بلا وحدة.
أي وحدات أستخدم ل font_size و grid؟
استخدموا الوحدة نفسها لكليهما —عادة بكسل CSS—. الرياضيات لا تعتمد على الوحدة ما دام المدخلان يتشاركان المقياس؛ تحويل rem يُترك لحجم خط الجذر.
كم تكلفة أداة ارتفاع السطر على شبكة الأساس؟
الأداة في المتصفح مجانية. طلبات API تستخدم رصيد KIT المدفوع مسبقًا ب $0.002 لكل استدعاء ناجح؛ الإدخال غير الصالح لا يُفوتر.