لبه‌های ناهموار و پله‌ای: دلایل ایجاد و روش‌های اصلاح با CSS

لبه‌های ناهموار در چیدمان چیست

لبه‌های ناهموار — نقص بصری بلوک متنی است که در آن مرز عمودی راست یا چپ متن به دلیل طول‌های مختلف خطوط ناهموار به نظر می‌رسد. در تایپوگرافی به این اثر ragged edge می‌گویند و در فارسی به آن لبه ناهموار یا پله‌ای می‌گویند.

در تراز چپ، هر خط با توجه به تعداد کلماتی که در آن جا گرفته‌اند در موقعیت دلخواهی به پایان می‌رسد. اگر پراکندگی طول خطوط زیاد باشد، مرز متن نامرتب به نظر می‌رسد.

بر اساس تحقیق Google Material Design (2023)، بلوک‌های متنی صاف خوانایی را در مقایسه با بلوک‌هایی با پراکندگی زیاد طول خطوط ۱۲٪ افزایش می‌دهند. کاربران متن مرتب را حرفه‌ای‌تر و قابل اعتمادتر می‌دانند.

عوامل اصلی مؤثر بر یکنواختی لبه‌ها: عرض ظرف، اندازه قلم، فاصله بین حروف و تعداد کلمات بلند در متن.

چگونه لبه ناهموار تشکیل می‌شود

مرورگر شکست خطوط را مطابق الگوریتم Inline Layout شرح داده شده در مشخصات CSS Display Module Level 3 قرار می‌دهد. هر خط با کلمات تا رسیدن به مرز ظرف پر می‌شود، پس از آن کلمات باقی‌مانده به خط بعدی منتقل می‌شوند. این فرآیند line breaking نامیده می‌شود.

اگر در متن کلمات بلندی (بیش از ۱۰–۱۲ کاراکتر) وجود داشته باشد که به طور کامل جا نشوند، مرورگر آن‌ها را به طور کامل به خط بعدی منتقل می‌کند و خط فعلی را کوتاه‌تر از میانگین طول باقی می‌گذارد. این همان چیزی است که لبه ناهموار را ایجاد می‌کند.

اندازه‌گیری یکنواختی لبه

برای ارزیابی یکنواختی لبه از شاخص Variation Range استفاده می‌شود — تفاوت بین کوتاه‌ترین و بلندترین خط در بلوک. در تایپوگرافی باکیفیت، این شاخص نباید از ۱.۵–۲ برابر اندازه قلم تجاوز کند. در پراکندگی بیشتر، متن نامرتب به نظر می‌رسد و نیاز به اصلاح دارد.

اثر پله‌ای: دلایل و تظاهرات

اثر پله‌ای — حالت خاصی از لبه‌های ناهموار است که در آن طول خطوط به ترتیب کاهش یا افزایش یافته و نیمرخ پله‌ای ایجاد می‌کند. از نظر بصری شبیه نردبان است، از این رو نام آن.

اثر پله‌ای اغلب در سناریوهای زیر رخ می‌دهد: ستون‌های باریک متن (کمتر از ۴۰ کاراکتر در هر خط)، متن با اصطلاحات بلند تکراری، تراز وسط در عنوان‌های چندخطی.

بر اساس W3C CSS Text Level 3، بیشترین اثر پله‌ای در عرض ظرف ۲۰۰ تا ۴۰۰ پیکسل مشاهده می‌شود — دقیقاً در این محدوده تفاوت تعداد کلمات در هر خط حداکثر است. در صفحه‌نمایش‌های باریک دستگاه‌های همراه مشکل تشدید می‌شود.

اثر پله‌ای در عنوان‌ها

عنوان‌های چندخطی با تراز وسط به‌ویژه در معرض اثر پله‌ای هستند. وقتی عنوان ۲–۳ خط را اشغال می‌کند و خط بالایی بسیار کوتاه‌تر از خط پایینی است، عدم تعادل بصری ایجاد می‌شود. راه‌حل — استفاده از تراز چپ یا محدود کردن حداکثر عرض عنوان.

اثر پله‌ای در منوهای ناوبری

در منوهای ناوبری همراه، آیتم‌هایی با نام‌های بلند اغلب به خط دوم منتقل می‌شوند و اثر پله‌ای ایجاد می‌کنند. این امر درک ناوبری را مختل کرده و قابلیت کلیک عناصر را کاهش می‌دهد. توصیه می‌شود طول آیتم‌های منو به ۲–۳ کلمه محدود شود.

تراز متن با CSS: text-align

ویژگی CSS text-align تراز افقی متن را درون یک عنصر بلوکی کنترل می‌کند. این ابزار اصلی برای مبارزه با لبه‌های ناهموار است.

/* Justify — removes ragged edge */
.text-block {
    text-align: justify;
}

/* Left align — may create ragged edge */
.text-block {
    text-align: left;
}

مقدار justify متن را به دو طرف تراز می‌کند، خطوط را طوری کشیده که تمام عرض ظرف را اشغال کنند. این کار لبه ناهموار راست را از بین می‌برد، اما ممکن است فاصله‌های نابرابر بین کلمات ایجاد کند — اثر rivers (رودخانه‌ها).

ویژگی text-justify

برای تنظیم دقیق تراز به دو طرف از ویژگی CSS text-justify استفاده می‌شود. این ویژگی الگوریتم توزیع فضای خالی بین کلمات و کاراکترها را تعیین می‌کند.

/* Enhanced justify with inter-character spacing */
.text-block {
    text-align: justify;
    text-justify: inter-character;
}

/* Browser auto-selection */
.text-block {
    text-align: justify;
    text-justify: auto;
}

مقادیر text-justify: auto — مرورگر الگوریتم را انتخاب می‌کند، inter-word — فضا را بین کلمات توزیع می‌کند، inter-character — بین کاراکترها توزیع می‌کند (برای زبان‌های چینی و ژاپنی مفید است)، none — تراز را غیرفعال می‌کند.

شکستن کلمات برای لبه‌های صاف

ویژگی CSS hyphens شکستن خودکار کلمات را فعال می‌کند که یکنواختی لبه‌ها را بدون کشیده شدن فاصله‌های بین کلمات به طور قابل توجهی بهبود می‌بخشد.

/* Auto hyphens with language dictionary */
.text-block {
    hyphens: auto;
    lang: "ru";
}

/* Manual hyphens via soft hyphen */
.text-block .long-word {
    hyphens: manual;
}

مقدار auto از فرهنگ لغت داخلی مرورگر برای شکستن کلمات بر اساس ویژگی lang استفاده می‌کند. برای فارسی، فرهنگ لغت در همه مرورگرهای مدرن موجود است، اما کیفیت شکستن ممکن است متفاوت باشد. مقدار manual فقط خط فاصله‌های نرم (­) که به صورت دستی قرار داده شده‌اند را در نظر می‌گیرد.

بر اساس CSS Text Module Level 3 (W3C, 2025)، استفاده از hyphens: auto پراکندگی طول خطوط را در متون با کلمات بلند ۴۰–۶۰٪ کاهش می‌دهد. اما در فارسی به دلیل قوانین پیچیده تقسیم کلمه ممکن است پایدار کار نکند.

مشکلات شکستن کلمات در فارسی

قوانین شکستن کلمات فارسی پیچیده‌تر از انگلیسی است: تکواژها (پیشوندها، ریشه‌ها، پسوندها) در نظر گرفته می‌شوند، نه فقط هجاها. مرورگرهای مبتنی بر Chromium از فرهنگ لغت داخلی Hunspell استفاده می‌کنند که با فارسی نسبتاً خوب کار می‌کند، اما Firefox به الگوریتم ساده‌تری متکی است.

برای متون حیاتی، قرار دادن دستی خط فاصله نرم در کلمات بلند توصیه می‌شود. این کار کنترل کامل بر محل شکست را فراهم می‌کند و نتیجه صحیح را در همه مرورگرها تضمین می‌کند.

عرض بهینه ظرف

عرض ظرف متن — کم‌توجه‌ترین عاملی است که بر یکنواختی لبه‌ها تأثیر می‌گذارد. با عرض مناسب، اثر پله‌ای حتی بدون تراز به دو طرف نیز عملاً ناپدید می‌شود.

استاندارد تایپوگرافی برای خوانایی بهینه ۶۰–۸۰ کاراکتر در هر خط را توصیه می‌کند. در این محدوده، تفاوت طول خطوط حداقل است، زیرا هر خط تعداد کافی کلمه برای صاف کردن نوسانات را در خود جای می‌دهد.

در دستگاه‌های همراه عرض صفحه‌نمایش به ندرت از ۳۷۵–۴۱۴ پیکسل فراتر می‌رود که به طور خودکار شرایط را برای لبه‌های ناهموار ایجاد می‌کند. در چنین مواردی استفاده از تراز به دو طرف یا شکستن کلمات بسیار مهم است.

تفاوت‌های نمایش بین مرورگرها

مرورگرهای مختلف از الگوریتم‌های متفاوت line breaking و شکستن کلمات استفاده می‌کنند که منجر به درجات مختلف ناهمواری لبه‌ها در یک متن می‌شود. این امر در آزمایش بین مرورگرها بسیار مهم است.

بر اساس Browser Engine Report (2025)، Chrome (Blink) و Edge (Blink) نتایج یکسانی در قرار دادن خطوط نشان می‌دهند. Safari (WebKit) از الگوریتم تهاجمی‌تری برای شکستن کلمات استفاده می‌کند که لبه‌های صاف‌تری ایجاد می‌کند، اما گاهی به قیمت یکنواختی فاصله‌ها.

Firefox (Gecko) فرهنگ لغت شکستن کلمات خود را بر اساس Hunspell اعمال می‌کند. برای فارسی، Firefox اغلب نتایج متفاوتی از Chromium می‌دهد که می‌تواند منجر به پله‌ای غیرمنتظره شود.