ریتم عمودی را با CSS و jQuery حفظ کنید

محتوا

• نوع تخمگذار
• ریتم عمودی
• انجام ریتم
• برخورد با تصاویر
• بهبود jQuery
• نتیجه

• دانش لازم است: CSS ، jQuery پایه
• نیاز دارد: jQuery ، CSS ، HTML
• زمان پروژه: 30 دقیقه
• فایلهای منبع را بارگیری کنید

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

نوع تخمگذار

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

ریتم عمودی

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

انجام ریتم

متأسفانه وب از نظر توانایی در ایجاد برخی اقدامات اساسی در مورد نوع ، هنوز پسر عموی چاپی ضعیفی است. در وب ما نمی توانیم از یک شبکه پایه به همان روشی که یک طراح چاپ (یا کودک در مدرسه) استفاده می کند استفاده کنیم - نمی توانیم خط پایه متن را با شبکه پایه یک سند همسو کنیم. CSS هیچ مفهومی از یک شبکه پایه ندارد. بنابراین ، متن ما دقیقاً در خطوط یک شبکه پایه قرار نخواهد گرفت. در عوض ، در شکاف بین خطوط به صورت عمودی قرار می گیرد. بهترین کاری است که وب می تواند انجام دهد.

بیایید با یک سند مثال عملی کنیم. در مرحله اول ، ما با ایجاد یک شبکه پایه قابل مشاهده ، ضرب و شتم را تنظیم خواهیم کرد. برای انجام این کار از یک تصویر پس زمینه تکراری برای ترسیم خطوط افقی منظم با فاصله 22 پیکسل استفاده خواهیم کرد:

1. html {background: #fff url (baseline_22.png)؛ }

هورا ، ما کاغذهای خط خود را داریم!

توجه خواهید کرد که هیچ چیز در صف نیست. برای اینکه همه چیز در یک ردیف قرار بگیرد ، می خواهیم لبه پایین همه عناصر به یکی از آن خطوط برخورد کند. ساده ترین راه برای انجام این کار این است که مطمئن شوید همه عناصر یک ارتفاع عمودی (از جمله حاشیه) را می گیرند که مضربی از 22 است. در اینجا برخی از CSS ها این کار را انجام می دهند. من از واحد REM استفاده می کنم ، اما برای مرورگرهایی که REM را نمی فهمند ، بازده EM را ارائه می دهم. من همچنین معادل واحد PX را در نظرات گنجانده ام. اگر هنوز REM / EM را نمی فهمید ، می توانید از مقادیر px استفاده کنید - همه آنها معادل هستند:

1. html {/ * اندازه قلم: 16 پیکسل ، ارتفاع خط: 22 پیکسل * /
2. قلم: 100٪ / 1.375 "Helvetica Neue"، Helvetica، Arial، sans-serif؛
3. پس زمینه: #fff url (baseline_22.png)؛ }
5. h1 ، h2 ، h3 ، h4 ، h5 ، h6 {/ * حاشیه بالا و پایین هر دو 22px * / هستند
6. / * em fallback * / margin: 1.375em 0؛
7. حاشیه: 1.375rem 0؛ }
8. اندازه قلم h1 {/ * 32 پیکسل ، ارتفاع خط 44 پیکسل است * * /
9. / * em backback * / font-size: 2em؛
10. اندازه قلم: 2rem؛ ارتفاع خط: 1.375؛ }
11. اندازه قلم h2 {/ * 26 پیکسل ، ارتفاع خط 44 پیکسل * /
12. / * em backback * / font-size: 1.75em؛
13. اندازه قلم: 1.75rem؛ ارتفاع خط: 1.5714285714؛ }
14. h3 ، h4 ، h5 ، h6 {/ * اندازه قلم 22px ، طول خط 22px * /
15. / * em backback * / font-size: 1.375em؛
16. اندازه قلم: 1.375rem؛ ارتفاع خط: 1؛ }
17. p ، ul ، blockquote {/ * حاشیه پایین 22px است ، ارتفاع خط از html (22px) به ارث می رسد * /
18. / * em fallback * / margin-top: 0؛ حاشیه پایین: 1.375em؛
19. margin-top: 0؛ margin-bottom: 1.375rem؛ }

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

برخورد با تصاویر

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

برای رفع آن همه کاری که واقعاً باید انجام دهیم این است که به هر تصویر حاشیه اضافه کنیم ، و پایین حاشیه را با شبکه خود قرار دهیم. که به اندازه کافی ساده است که با کمی جاوا اسکریپت خودکار می شود. برنامه اصلی ما این است:

1. ارتفاع هر تصویر را مشخص کنید.
2. ببینید چند بار مقدار پایه به فضای عمودی که تصویر در حال حاضر اشغال می کند تقسیم می شود و باقیمانده را بدست آورید.
3. باقیمانده را از خط پایه کم کنید تا جبرانی را که باید روی تصویر اعمال کنیم ، بدست آورید.
4. جبران را به عنوان یک حاشیه در پایین تصویر اعمال کنید.

پایین فضای عمودی تصویر اکنون به درستی با شبکه پایه همسو می شود. در اینجا یک تابع اساسی در jQuery وجود دارد که این کار را انجام می دهد:

1. $ (پنجره) .bind ('بارگذاری' ، عملکرد () {
2. $ ("img"). هر (تابع () {
3. / * متغیرها * /
4. var this_img = $ (این)؛
5. var پایه = 22؛
6. var img_height = this_img.height ()؛
7. / * ریاضیات را انجام دهید * /
8. var باقی مانده = parseFloat (img_height٪ پایه)؛
9. / * چقدر باید اضافه کنیم؟ * /
10. var offset = parseFloat (پایه-باقیمانده)؛
11. / * حاشیه را روی تصویر اعمال کنید * /
12. this_img.css ("حاشیه پایین" ، جابجایی + "px")؛
13. });
14. });

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

بهبود jQuery

جهان به ندرت مستقیم پیش می رود ، و بنابراین در اینجا معلوم می شود - ما باید با بسیاری از جزئیات اجرا مقابله کنیم. عملکرد ما چه مشکلی دارد؟ فراوانی:

• این نتایج ناخوشایند با تصاویر درون خطی به جای شناور یا مسدود ایجاد می کند.
• در برخی از تصاویر ، به ویژه تصاویر موجود در ظروف ، اشکال آور به نظر می رسد.
• با طرح های مایع سرو کار ندارد.
• بسیار قابل استفاده نیست.

ما نمی خواهیم این رفتار را روی تصاویر درون خطی اعمال کنیم ، مانند صورت خندان در مثال. تصاویر درون خطی تراز می شوند بنابراین لبه پایین در همان خط پایه متن قرار می گیرد (نه شبکه پایه). این بدان معناست که تصویر به صورت عمودی جبران می شود. نه CSS و نه JS راهی به ما نمی دهند تا بفهمیم خط پایه برای یک عنصر متن کجاست ، بنابراین ما جبران آن را نمی دانیم. ما باید تصاویر درون خطی را نادیده بگیریم ، و رفع اشکال خود را فقط روی تصاویر تنظیم شده اعمال کنیم نمایش: بلوک کردن (خوشبختانه هر تصویر شناور به طور خودکار برای نمایش بلوک تنظیم می شود).

اگر یک تصویر در یک ظرف باشد ، ممکن است حاشیه اعمال شده بر روی تصویر به دلیل تنظیمات سرریز روی ظرف مخفی باشد. همچنین ، ممکن است حاشیه بر روی تصویر را نخواهیم ، بلکه در عوض بر روی عنصر ظرف است. در مثال ، ترجیح می دهیم حاشیه جعبه سفید را داشته باشیم تا تصویر داخل جعبه ، بنابراین می توانیم از ایجاد شکاف های عجیب و غریب در جعبه جلوگیری کنیم.

این عملکرد فقط یکبار اجرا می شود ، اما با اندازه گیری مجدد مرورگر ، تصاویر روی یک طرح مایع تغییر می کنند (برای دیدن این مثال ، نمونه را به چیزی کاملاً باریک تغییر دهید). تغییر اندازه دوباره ریتم را می شکند. ما به عملکرد نیاز داریم تا بعد از تغییر اندازه مرورگر و همچنین بعد از بارگذاری صفحه ، اجرا شود. طرح های مایع نیز مشکلات دیگری را به همراه دارد. تصاویر می توانند از پیکسل های کسری بالا باشند ، به عنوان مثال 132.34px. این به نوبه خود می تواند نتایج غیر منتظره ای ایجاد کند ، حتی اگر ما یک حاشیه کسری اعمال کنیم (اگر علاقه مند هستید ، به این دلیل است: trac.webkit.org/wiki/LayoutUnit). بنابراین ، برای جلوگیری از اشکالات طرح بندی ناشی از پیکسل های کسری ، باید تصویر را به یک ارتفاع پیکسل کامل ماساژ دهیم.

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

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

1. $ (پنجره) .bind ('بارگذاری' ، عملکرد () {
2. $ ("img"). baselineAlign ()؛
3. });

یا ، می توانید به افزونه بگویید که حاشیه را به یک ظرف مشخص شده اعمال کند ، اگر یکی به عنوان والد تصویر وجود دارد:

1. $ (پنجره) .bind ('بارگذاری' ، عملکرد () {
2. $ ("img"). baselineAlign ({container: '. popup'})؛
3. });

نتیجه

حفظ یک ریتم عمودی خوب یک عمل طراحی ظریف اما م effectiveثر است که به طور منظم در چاپ استفاده می شود. شما اکنون اصول اساسی را می دانید ، از خطوط ابتدایی و شبکه مبنا دانش کافی دارید و از برخی از محدودیت های طرح متن CSS در مقابل چاپ اطلاع دارید. شما همچنین می دانید که چگونه با رعایت این محدودیت ها کار کنید ، اسناد خود را با هر ریتم عمودی که دوست دارید ، تنظیم کنید و ابزاری برای کمک به مقابله با محتوای مخل تصویر دارید.

همانطور که CSS بالغ می شود ، ما همچنان به ویژگی های بیشتری مطابق با عموزاده های چاپی خود دسترسی پیدا می کنیم ، بنابراین درک درست نوع برای ایجاد وب سایت های با کیفیت اهمیت بیشتری پیدا می کند. اگر می خواهید در مورد نوع به طور کلی بیشتر بدانید ، من به شدت توصیه می کنم www.thinkingwithtype.com (و خرید کتاب برای ادامه کار آن). اگر مقالات CSS را در مورد نوع درمان دنبال می کنید ، مقالات متعددی در اینجا و سایر مکانهای وب وجود دارد. من همچنین توصیه می کنم از جدیدترین اخبار مارک بولتون و الیوت جی استوکس که هر دو غالباً در مورد نوع در رابطه با طراحی وب به طور خاص صحبت می کنند ، مطلع شوید.

خوش بگذره!