- MT5 Pro Set Incl. دیسک های ترمز طوفان HC - نسخه ویژه
- سرمایه گذاری کمی: هزینه معامله و تجزیه و تحلیل لغزش
- مطالعه روش جدید در زمان واقعی را برای شناسایی حباب های سهام مانند GameStop نشان می دهد
- بازار سهام امروز: سهام آسیایی عمدتاً به دلیل نگرانی نسبت به بانک های آمریکایی ، رشد چین کمتر است
- Cryptocurrency News - چگونه می توان لیست های سکه آینده را پیدا کرد؟
- بهترین 7 راه درآمد برای کسب درآمد از اینترنت بدون سرمایه گذاری
- باناریوم محدود
- 7 اصل برنامه ریزی استادانه
- تنظیم کننده سابق شهر می گوید ، هنگ کنگ به عنوان قوانین دارایی دیجیتال برای چین قوانین ماسهبازی برای چین است
- همه سزاوار داروهای ایمن و مقرون به صرفه هستند.
آخرین مطالب
امکانات وب
خصوصیات و مقادیر نسبی منطقی ، جریان به جای شکل فیزیکی صفحه ، به جریان متن مرتبط می شوند. بیاموزید که چگونه از این رویکرد جدیدتر به CSS استفاده کنید.
یک الگوی رابط کاربری بسیار رایج ، یک برچسب متن با یک نماد درون خطی پشتیبانی است.
این نماد در سمت چپ متن با شکاف کوچکی بین این دو قرار دارد که توسط حاشیه سمت راست روی نماد تهیه شده است. هرچند مشکلی وجود دارد ، زیرا این تنها زمانی کار خواهد کرد که جهت متن به راست باقی بماند. اگر جهت متن به سمت راست به سمت راست تغییر کند-به این ترتیب زبانهایی مانند عربی می خوانند-این نماد در برابر متن قرار می گیرد.
چگونه این را در CSS حساب می کنید؟خصوصیات منطقی به شما امکان می دهد این شرایط را حل کنید. از جمله بسیاری از مزایای دیگر ، آنها پشتیبانی رایگان و خودکار برای بین المللی سازی را ارائه می دهند. آنها به شما کمک می کنند جلوی مقاوم تر و فراگیرتر بسازید.
واژه شناسی #
خصوصیات فیزیکی بالا ، راست ، پایین و چپ به ابعاد فیزیکی منظره اشاره دارد. شما می توانید به این فکر کنید مانند یک قطب نما بر روی نقشه. از طرف دیگر ، خصوصیات منطقی به لبه های یک جعبه اشاره می کنند زیرا مربوط به جریان محتوا است. بنابراین ، در صورت تغییر جهت متن یا حالت نوشتن ، می توانند تغییر کنند. این یک تغییر بزرگ از سبک های جهت دار است و هنگام یک ظاهر طراحی رابط های ما ، انعطاف پذیری بیشتری به ما می دهد.
جریان بلوک #
جریان بلوک مسیری است که در آن بلوک های محتوا قرار می گیرند. به عنوان مثال ، اگر دو پاراگراف وجود داشته باشد ، جریان بلوک جایی است که بند دوم می رود. در یک سند انگلیسی ، جریان بلوک از بالا به پایین است. به این موضوع در متن پاراگراف های متن پیروی از یکدیگر ، از بالا به پایین فکر کنید.
جریان درون خطی #
The inline flow is how text flows in a sentence. In an English document the inline flow is left to right. If you were to change the document language of your webpage to Arabic ( <html lang="ar">) ، سپس جریان درون خطی راست به چپ خواهد بود.
متن در جهت تعیین شده توسط حالت نوشتن سند جریان می یابد. شما می توانید مسیری را که متن با خاصیت حالت نوشتن بیان شده است تغییر دهید. این می تواند برای کل سند یا عناصر فردی اعمال شود.
نسبی جریان #
از لحاظ تاریخی در CSS ، ما فقط توانسته ایم خواصی مانند حاشیه را نسبت به جهت دو طرف آنها اعمال کنیم. به عنوان مثال ، حاشیه بالای فیزیکی عنصر اعمال می شود. با خصوصیات منطقی ، حاشیه حاشیه شروع به حاشیه بلوک می شود. این بدان معنی است که صرف نظر از جهت زبان و متن ، جریان بلوک دارای قوانین حاشیه مناسب است.
اندازه #
برای جلوگیری از یک عنصر بیش از یک عرض یا ارتفاع خاص ، یک قانون مانند این بنویسید:
معادل های مربوط به جریان حداکثر اندازه و اندازه حداکثر بلوک هستند. همچنین می توانید به جای Min-Height و Min-Width از Min-Block-Size و Min-Inline استفاده کنید.
با خصوصیات منطقی ، این قانون حداکثر عرض و ارتفاع مانند این است:
شروع و پایان #
به جای استفاده از دستورالعمل هایی مانند بالا ، راست ، پایین و چپ ، از شروع و پایان استفاده کنید. این به شما امکان می دهد تا شروع ، inline-end ، block-end و inline-start. اینها به شما امکان می دهد از خصوصیات CSS که به تغییرات حالت نوشتن پاسخ می دهند ، استفاده کنید.
به عنوان مثال ، برای تراز کردن متن به سمت راست ، می توانید از این CSS استفاده کنید:
اگر هدف شما این نیست که با حق جسمی هماهنگ باشید بلکه به شروع جهت خواندن ، این مفید نیست. با مقادیر منطقی ، مقادیر شروع و پایان مفیدتری وجود دارد که به جهت متن نقشه می کنند. قانون تراز متن اکنون به این شکل است:
فاصله و موقعیت یابی #
خصوصیات منطقی برای حاشیه ، بالشتک و درپوش عناصر موقعیت یابی را ایجاد می کند و تعیین چگونگی تعامل این عناصر با یکدیگر در حالت های نوشتن آسان تر و کارآمدتر است. خصوصیات مربوط به حاشیه و بالشتک هنوز نقشه های مستقیم به جهت ها هستند ، اما تفاوت اصلی این است که وقتی حالت نوشتن تغییر می کند ، با آن تغییر می کنند.
این امر مقداری عمودی داخل آن را با بالشتک اضافه می کند و آن را از سمت چپ با حاشیه بیرون می کشد. ویژگی برتر نیز آن را به سمت پایین تغییر می دهد. با معادل های خاص خاص ، در عوض به این شکل به نظر می رسد:
این امر مقداری درون خط داخل را با بالشتک اضافه می کند و آن را از شروع خط با حاشیه بیرون می کشد. ویژگی inset-block آن را به سمت داخل از بلوک شروع می کند.
ویژگی inset-block تنها گزینه کوتاه با خصوصیات منطقی نیست. این قانون با استفاده از نسخه های کوتاه از خصوصیات حاشیه و بالشتک می تواند بیشتر متراکم شود.
مرز ها #
اضافه کردن مرز و مرزهای مرزی نیز می تواند با خصوصیات منطقی انجام شود. برای افزودن مرز در پایین و راست ، با شعاع راست ، ممکن است یک قانون مانند این بنویسید:
یا ، می توانید از خصوصیات منطقی مانند این استفاده کنید:
"انتهای پایان" در Radius-end-end-end پایان بلوک و پایان خطی است.
واحد #
خصوصیات منطقی دو واحد جدید را به همراه دارد: vi و vb. یک واحد VI 1 ٪ از اندازه نمای در جهت داخلی است. معادل خاصیت غیرقانونی VW است. واحد VB 1 ٪ از نمای در جهت بلوک است. معادل خاصیت غیرقانونی VH است.
این واحدها همیشه به جهت خواندن نقشه می روند. به عنوان مثال ، اگر می خواهید یک عنصر 80 ٪ از فضای درون خطی موجود در یک Viewport را به خود اختصاص دهد ، اگر حالت نوشتن عمودی باشد ، به طور خودکار آن اندازه را تغییر می دهد تا از بالا به پایین باشد.
با استفاده از خصوصیات منطقی به صورت عملی #
خصوصیات منطقی و حالت های نوشتن فقط برای بین المللی نیست. می توانید از آنها برای تولید یک رابط کاربری متنوع تر استفاده کنید.
اگر نمودار دارید که دارای برچسب در محور X و محور Y است ، ممکن است بخواهید متن را روی برچسب Y به صورت عمودی بخوانید.
از آنجا که برچسب Y Axis در نسخه ی نمایشی دارای یک حالت نوشتن از عمودی-RL است ، می توانید از همان مقادیر حاشیه در هر دو برچسب استفاده کنید. مقدار شروع حاشیه برای هر دو برچسب اعمال می شود زیرا شروع بلوک در سمت راست برای محور y و در بالا برای محور x است. طرفین بلوک دارای مرز قرمز هستند تا بتوانید آنها را ببینید.
حل شماره نماد #
اکنون که ما ویژگی های منطقی را پوشش داده ایم ، این دانش را می توان برای مشکل طراحی که با آن شروع کردیم استفاده کرد.
حاشیه در سمت راست عنصر نماد اعمال شده است. برای اینکه فاصله بین نماد و متن برای پشتیبانی از تمام جهت خواندن ، از ویژگی های حاشیه خط میانی استفاده شود.
اکنون ، صرف نظر از جهت خواندن ، نماد خود و فضا را به طور مناسب موقعیت می کند.
همانطور که با دست خود می نویسید ، مچ دست شما در امتداد کدام محور منطقی حرکت می کند؟
کلمات درون خطی جریان دارند و بنابراین باید هنگام نوشتن دست خود را طی کنید.
محتوا به عنوان بلوک جریان می یابد و مچ دست شما در هنگام پایان یک نوع محتوا و شروع دیگری در این محور حرکت می کند.
تمام مواردی را که می تواند از خصوصیات منطقی بهره مند شود بررسی کنید
رنگهای تراز سایه ها طرفین جعبه های جعبه
وقتی حالت نوشتن سند انجام می شود ، رنگ تغییر نمی کند.
مثال: شروع انعطاف پذیر ، بلوک و شروع درون خطی
سایه ها وقتی حالت نوشتن سند انجام می شود تغییر نمی کنند.
مثال: بلوک شروع و درون خطی.
مثالها: اندازه درون خطی و حداکثر بلوک.
کدام سمت منطقی یک کلمه زیر خط کشیده شده است؟
Inline Start Inline End Block Start Block End
این امر می تواند یک زیر خط در سمت چپ یک کلمه به زبان انگلیسی قرار دهد.
این امر می تواند زیر نظر یک کلمه به زبان انگلیسی باشد.
این امر می تواند زیرنویس یک کلمه به زبان انگلیسی باشد.
بسیار خوب است که CSS این موقعیت را برای شما انجام می دهد.
پشتیبانی مرورگر #
پشتیبانی مرورگر برای خصوصیات و مقادیر منطقی ، به ویژه با خصوصیات کوتاه مانند خط حاشیه و خط بالشتک بسیار متنوع است. توصیه می شود قبل از استفاده از آنها ، پشتیبانی از این خصوصیات را ارزیابی کنید و در نظر بگیرید که وب سایت شما چگونه در جایی که هیچ پشتیبانی در دسترس نیست ، به نظر می رسد و رفتار می کند. یک شکست کامل را می توان در Caniuse.com یافت.
دروس بعدی و قبلی
به جز آنچه در غیر این صورت ذکر شد ، محتوای این صفحه تحت مجوز Creative Commons Attribution 4. 0 مجوز دارد و نمونه های کد تحت مجوز Apache 2. 0 مجوز دارند. برای جزئیات بیشتر ، به سیاست های سایت Google Developers مراجعه کنید.
استراتژی ترید...
ما را در سایت استراتژی ترید دنبال می کنید
برچسب :
نویسنده : مرجان شیرمحمدی
بازدید : 42
