استاد چیدمان
من سالها در این وبلاگ به آموزش چیدمان CSS پرداخته ام. گذاشتم
تمام چیزی که من می دانم استاد چیدمان دوره: 70+ درس و 150+ مثال تعاملی که آموزش می دهند
شما چگونه در مورد طرح‌بندی‌های CSS فکر کنید، نه فقط نحو را حفظ کنید.
آیا تا به حال آرزو کرده اید که ای کاش یک راه بومی در CSS وجود داشت تا دو خط عنوان از نظر تعداد کلمات در هر خط یکسان باشد؟ من به عنوان یک طراح، اغلب در هنگام طراحی یک وب سایت یا رابط کاربری، متوجه این موضوع می شوم.
این نوع چیزها می‌تواند باعث شود رابط کاربری که روی آن کار می‌کنید نامتعادل به نظر برسد یا چیزی از دست داده باشد. منظور من این است:
کلمه برجسته کلمه ای است که در نوبت خود زندگی می کند. از نظر بصری، این عجیب به نظر می رسد. این امر بصری را می شکند
هنگام طراحی در ابزاری مانند Figma، I عمدا فقط برای جلوگیری از این عدم تطابق، آخرین کلمه را به خط قبل منتقل کنید.
به نظر بهتر است، اینطور نیست؟
در کد، اگر بالانس مهم است، می توانیم آن را به صورت دستی با استفاده از a انجام دهیم . راه‌هایی وجود دارد که به مرورگر توصیه می‌شود با استفاده از آن، چه زمانی یک کلمه را بشکند
یک کامپوننت React به نام React Wrap Balancer وجود دارد که باعث می‌شود متن با تغییر اندازه به صورت پویا متعادل شود.
متعادل کردن متن در CSS
خوشبختانه، ما در حال حاضر پشتیبانی آزمایشی برای text-wrap: balance در کروم قناری. مرورگر به طور خودکار تعداد کلمات را محاسبه کرده و آنها را به طور مساوی بین دو خط تقسیم می کند.
تنها چیزی که نیاز داریم درخواست است text-wrap: property.
.c-hero__title {
max-width: 36rem;
text-wrap: balance;
}
این باعث متعادل شدن محتوای عنوان می شود و حتی یک کلمه در ردیف آن نخواهیم داشت.
نسخه ی نمایشی
بیایید به این موضوع با جزئیات بیشتری نگاه کنیم.
متعادل کردن متن با max-width روی عنصر تنظیم کنید
توجه به این نکته ضروری است که استفاده از تعادل متن تأثیری بر عرض عنصر نخواهد داشت.
شکل زیر را در نظر بگیرید.
حداکثر عرض هدر است 630px. چه زمانی text-wrap: balance وجود دارد، تعداد کلمات در هر خط را برابر می کند و max-width تحت تاثیر قرار نخواهد گرفت.
همین اتفاق می افتد زمانی که ظرف کوچک است، مانند یک عنوان نقشه. این فقط روی کلمات موجود در ظرف آنها تأثیر می گذارد.
از موارد و مثال ها استفاده کنید
بیایید بررسی کنیم که کجا text-wrap: balance می تواند مفید باشد.
عنوان صفحه
عنوان صفحه اولین چیزی است که می تواند توجه کاربر را به خود جلب کند. در اینجا یک مثال بدون تعادل آورده شده است:
متن متعادل:
عنوان نقشه
این یک الگوی رایج است که در آن ممکن است فهرستی از مقالات با عناوین مختلف را مشاهده کنید.
با تعادل متن در CSS، این مشکل به راحتی قابل حل است:
.card__title {
text-wrap: balance;
}
اشاره
ما اغلب از یک راهنمای ابزار برای نشان دادن اطلاعات مهم به کاربر استفاده می کنیم. می تواند چند کلمه یا چند خط باشد.
در اینجا اشاره ای است که یک کلمه در نوبت خود زندگی می کند.
نسخه ثابت با text-wrap: balance.
.tooltip p {
text-wrap: balance;
}
مدال
اغلب ممکن است یک عنوان مودال داشته باشیم که چندین خط را در بر می گیرد. دیدن یک کلمه در هر خط از نظر بصری آزاردهنده است.
با تعادل متن بهتر به نظر می رسد:
.modal__title {
text-wrap: balance;
}
سوالات متداول
نمونه دیگری که پتانسیل خوبی برای آن می بینم text-wrap: balance در لیست سوالات متداول قرار دارد.
پس از متعادل کردن متن:
متعادل کردن متن تأثیری بر عرض عنصر نخواهد داشت
در مورد استفاده مطمئن نیستم text-wrap: balance زمانی که نمی تواند عرض عنصر را کنترل کند. در برخی از طرح ها می تواند فضای بزرگی را به جا بگذارد که به نظر من طراحی را حتی بدتر می کند.
شکل زیر را در نظر بگیرید:
.blockquote {
max-width: 20rem;
}
.blockquote p {
text-wrap: balance;
}
به عرض متن در طرح کلی صورتی توجه کنید. هنگامی که توازن متن اعمال می شود، عرض به همان شکلی که هست باقی می ماند و فقط متن دوباره مرتب می شود.
در اینجا یک مشکل مشابه از مثال اشاره ای که نشان دادم وجود دارد:
من می توانم از تجربه گذشته به شما بگویم که طراحان این را دوست ندارند. این یک فضای سفید بزرگ است که طراحی را ایجاد می کند احساس عدم تعادل کنید.
چه می‌شود، برای مثال، اگر بتوانیم یک گزینه اجاره را در نظر بگیریم text-wrap: balance بر عرض عنصر تاثیر می گذارد؟
.element {
text-wrap: balance;
width: fit-content;
}
کلمه کلیدی fit-content عرض عنصر را مجبور می کند با متن متعادل جدید مطابقت داشته باشد، اما این فقط یک ایده است. من مطمئن هستم که این ایده را می توان با چیز بهتری جایگزین کرد، اما شما این ایده را دریافت می کنید.
محدودیت های عملکرد
در حال حاضر، این ویژگی تنها به 4 خط محدود شده است. این بدان معنی است که می توان از آن عمدتاً برای سرفصل ها یا پاراگراف هایی با چندین خط استفاده کرد.
منابع اضافی:
