خواص منطقی

پادکست CSS - 012: ویژگی های منطقی

یک الگوی رابط کاربری واقعا رایج، یک برچسب متنی با نماد درون خطی پشتیبانی است.

آیکون در سمت چپ متن با شکاف کوچکی بین این دو قرار دارد که با margin-right روی نماد ارائه شده است. اما مشکلی وجود دارد، زیرا این تنها زمانی کار می‌کند که جهت متن از چپ به راست باشد. اگر جهت متن به راست به چپ تغییر کند - که زبان‌هایی مانند عربی به این شکل خوانده می‌شود - نماد مقابل متن قرار می‌گیرد.

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

اصطلاحات

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

جریان را مسدود کنید

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

سه بلوک، عناصر div، با یک فلش رو به پایین، با برچسب "جریان بلوک"

جریان درون خطی

جریان درون خطی نحوه جریان متن در یک جمله است. در یک سند انگلیسی، جریان درون خطی از چپ به راست است. اگر بخواهید زبان سند صفحه وب خود را به عربی ( <html lang="ar"> ) تغییر دهید، جریان درون خطی از راست به چپ خواهد بود.

سه کلمه، «او صدف‌های دریایی می‌فروشد»، با پیکان چپ به راست، با برچسب «جریان درون خطی»

متن در جهتی که با حالت نوشتن سند تعیین می شود جریان می یابد. می توانید جهت قرارگیری متن را با ویژگی writing-mode تغییر دهید. این را می توان برای کل سند یا برای عناصر جداگانه اعمال کرد.

نسبی جریان

از لحاظ تاریخی در CSS، ما فقط توانسته‌ایم ویژگی‌هایی مانند حاشیه را نسبت به جهت طرف‌های آنها اعمال کنیم. به عنوان مثال، margin-top به بالای فیزیکی عنصر اعمال می شود. با ویژگی های منطقی، margin-top تبدیل به margin-block-start می شود. این بدان معنی است که بدون توجه به زبان و جهت متن، جریان بلوک دارای قوانین حاشیه مناسب است.

نموداری که تمام اندازه های مختلف یک جعبه را نشان می دهد و هر بخش اندازه گیری از کجا شروع و پایان می یابد

سایز بندی

برای جلوگیری از بیشتر شدن یک عنصر از عرض یا ارتفاع معین، یک قانون مانند این بنویسید:

.my-element {
  max-width: 150px;
  max-height: 100px;
}

معادل های نسبی جریان عبارتند از max-inline-size و max-block-size . همچنین می‌توانید از min-block-size و min-inline-size به جای min-height و min-width استفاده کنید.

با ویژگی های منطقی، قانون حداکثر عرض و ارتفاع به شکل زیر است: 

.my-element {
  max-inline-size: 150px;
  max-block-size: 100px;
}

شروع و پایان

به جای استفاده از جهت هایی مانند بالا، راست، پایین و چپ، از شروع و پایان استفاده کنید. این به شما شروع بلاک، پایان درون خطی، بلوک پایان و شروع درون خطی می دهد. اینها به شما این امکان را می دهند که ویژگی های CSS را اعمال کنید که به تغییرات حالت نوشتن پاسخ می دهند.

به عنوان مثال، برای تراز کردن متن به سمت راست، می توانید از این CSS استفاده کنید:

p {
  text-align: right;
}

اگر هدف شما همسویی با سمت راست فیزیکی نیست، بلکه بیشتر با شروع جهت خواندن است، این کار مفیدی نیست. با مقادیر منطقی، مقادیر start و end مفیدتری وجود دارد که به جهت متن نگاشت می شوند. قانون چینش متن اکنون به شکل زیر است: 

p {
  text-align: end;
}

فاصله گذاری و موقعیت یابی

ویژگی‌های منطقی برای margin ، padding و inset باعث می‌شود عناصر موقعیت‌یابی و تعیین نحوه تعامل این عناصر با یکدیگر در حالت‌های نوشتاری آسان‌تر و کارآمدتر شوند. ویژگی‌های مربوط به حاشیه و padding هنوز نگاشت مستقیم جهت‌ها هستند، اما تفاوت اصلی این است که وقتی حالت نوشتن تغییر می‌کند، با آن تغییر می‌کنند.

.my-element {
  padding-top: 2em;
  padding-bottom: 2em;
  margin-left: 2em;
  position: relative;
  top: 0.2em;
}

این مقداری فضای داخل عمودی را با padding اضافه می کند و آن را از سمت چپ با margin بیرون می راند. ویژگی top نیز آن را به سمت پایین تغییر می دهد. با معادل‌های ویژگی منطقی، در عوض به شکل زیر است:

.my-element {
  padding-block-start: 2em;
  padding-block-end: 2em;
  margin-inline-start: 2em;
  position: relative;
  inset-block-start: 0.2em;
}

این مقداری فضای درون خطی با padding اضافه می‌کند و آن را از شروع درون خطی با margin بیرون می‌آورد. ویژگی inset-block آن را از block-start به سمت داخل حرکت می دهد.

ویژگی inset-block تنها گزینه مختصر با ویژگی های منطقی نیست. این قانون را می توان با استفاده از نسخه های مختصر حاشیه و ویژگی های padding بیشتر فشرده کرد. 

.my-element {
  padding-block: 2em;
  margin-inline: 2em 0;
  position: relative;
  inset-block: 0.2em 0;
}

مرزها

افزودن border و border-radius نیز با ویژگی های منطقی قابل انجام است. برای اضافه کردن یک حاشیه در پایین و سمت راست، با شعاع سمت راست، می‌توانید قاعده‌ای مانند این بنویسید:

.my-element {
  border-bottom: 1px solid red;
  border-right: 1px solid red;
  border-bottom-right-radius: 1em;
}

یا می توانید از ویژگی های منطقی مانند زیر استفاده کنید:

.my-element {
  border-block-end: 1px solid red;
  border-inline-end: 1px solid red;
  border-end-end-radius: 1em;
}

end-end در border-end-end-radius انتهای بلوک و انتهای خطی است.

واحدها

ویژگی های منطقی دو واحد جدید به ارمغان می آورند: vi و vb . یک واحد vi 1% از اندازه نمای در جهت درونی است. معادل ویژگی غیر منطقی vw است. واحد vb 1% نمای در جهت بلوک است. معادل ویژگی غیر منطقی vh است.

این واحدها همیشه به جهت خواندن نقشه می‌شوند. به عنوان مثال، اگر می خواهید یک عنصر 80٪ از فضای درون خطی موجود در یک viewport را اشغال کند، با استفاده از واحد vi ، اگر حالت نوشتن عمودی باشد، به طور خودکار آن اندازه را به بالا به پایین تغییر می دهد.

استفاده از ویژگی های منطقی به صورت عملی

ویژگی های منطقی و حالت های نوشتن فقط برای بین المللی سازی نیستند. می توانید از آنها برای ایجاد یک رابط کاربری همه کاره تر استفاده کنید.

اگر نموداری دارید که دارای برچسب هایی در محور X و محور Y است، ممکن است بخواهید متن روی برچسب Y به صورت عمودی خوانده شود.

از آنجایی که برچسب محور Y در نسخه آزمایشی دارای writing-mode vertical-rl است، می‌توانید از مقادیر margin یکسانی در هر دو برچسب استفاده کنید. مقدار margin-block-start برای هر دو برچسب اعمال می شود زیرا شروع بلوک در سمت راست برای محور Y و در بالا برای محور X است. طرف‌های شروع بلوک دارای حاشیه قرمز هستند تا بتوانید آنها را ببینید.

حل مشکل آیکون

اکنون که ویژگی های منطقی را پوشش دادیم، این دانش را می توان در مسئله طراحی که با آن شروع کردیم به کار برد. 

p {
  display: inline-flex;
  align-items: center;
}

p svg {
  width: 1.2em;
  height: 1.2em;
  margin-right: 0.5em;
  flex: none;
}

حاشیه در سمت راست عنصر نماد اعمال شده است. برای اینکه فاصله بین نماد و متن از تمام جهت های خواندن پشتیبانی کند، باید به جای آن از ویژگی margin-inline-end استفاده شود. 

p {
  display: inline-flex;
  align-items: center;
}

p svg {
  width: 1.2em;
  height: 1.2em;
  margin-inline-end: 0.5em;
  flex: none;
}

اکنون، صرف نظر از جهت خواندن، آیکون خود را در موقعیت مناسب قرار می دهد و فضای مناسبی برای خود ایجاد می کند.

درک خود را بررسی کنید

دانش خود را از ویژگی های منطقی آزمایش کنید

وقتی با دست می نویسید مچ دست شما در امتداد کدام محور منطقی حرکت می کند؟

inline
کلمات به صورت درون خطی جریان دارند و به همین ترتیب باید دست شما هنگام نوشتن حرکت کند.
block
محتوا به صورت بلوک جریان می یابد و مچ دست شما در امتداد این محور حرکت می کند زمانی که یک نوع محتوا پایان می یابد و نوع دیگری شروع می شود.

تمام مواردی که می توانند از ویژگی های منطقی بهره مند شوند را بررسی کنید

رنگ ها
وقتی حالت نوشتن سند تغییر می کند، رنگ تغییر نمی کند.
هم ترازی
مثال‌ها: flex-start ، block-end ، و inline-start
سایه ها
وقتی حالت نوشتن سند تغییر می کند، سایه ها تغییر نمی کنند.
طرف جعبه
مثال‌ها: block-start و inline .
اندازه ها
مثال‌ها: inline-size و max-block-size .
گوشه های جعبه
مثال‌ها: border-end-end-radius .

زیر کدام سمت منطقی کلمه خط کشیده شده است؟

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