שמור על קצב אנכי בעזרת CSS ו- jQuery

תוֹכֶן

• סוג פריסה
• קצב אנכי
• ניהול הקצב
• התמודדות עם תמונות
• שיפור ה- jQuery
• סיכום

• צריך ידע: CSS, jQuery בסיסי
• דורש: jQuery, CSS, HTML
• זמן הפרויקט: 30 דקות
• הורד קבצי מקור

בהנחה שאתה מעצב מהתוכן החוצה, ההחלטה הראשונה להשפיע על העיצוב שלך יש ל להיות קשור לסוג. אפילו על ידי לֹא בחירת גופן שעשית משהו שמשפיע על האתר שלך. סוג הוא הליבה להדפסה ולעיצוב אתרים, והוא מורכב; ישנם הרבה מונחים, פרקטיקות, כללים וטכניקות שנצברו לשימוש טוב. מאמר זה עוסק בטכניקה אחת לניהול היבט מסוג אחד, כזה שקשה היה לעשות ברשת, אך הוא שגרתי בדפוס: שמירה על קצב אנכי עקבי, שמאפשר לנו להשיג מערך מקצועי.

סוג פריסה

בדפוס, עבור כל פריט עם כמות טקסט לא מבוטלת, סביר להניח שיסוד העיצוב יהווה רשת בסיסית. הוא משמש כדי להביא מבנה לדף ומנחה את הזרימה האנכית של התוכן. כמעט הכל ממוקם ביחס לרשת הבסיס. אל דאגה אם אינך מכיר במונחים, איש אינו מכיר את קווי הבסיס או רשתות הבסיס; אתה כבר יודע עליהם. תחשוב חזרה לבית הספר, כאשר ללא ספק כתבת על נייר מרופד - כפי שכתבת הנחת את החלק התחתון של מכתביך בצורה מסודרת על כל אחת מהשורות על הנייר. בסיס הבסיס ורשת הבסיס בפעולה. קו הבסיס הוא קו דמיוני שעליו מיישרים קו תחתית האותיות.אם תסתכל על מאמר זה עכשיו, "תראה" קו בסיס, למרות שאין ממש קו. המוח שלך שם שם בשבילך, בגלל זה אתה יכול לקרוא משפטים. הקווים על נייר מרופד? הם רשת בסיסית. ישר כך שהמשפטים שלך ישרים, והגדר במרווחים קבועים כך שלטקסט שלך יהיה מקצב אנכי קבוע.

קצב אנכי

קצב אנכי מכתיב היכן נמצא הטקסט בדף. זהו מרכיב שמשפיע על יכולתנו לסרוק ולקרוא גושי טקסט, והוא מסייע בהסברה על התגובות הרגשיות שלנו. כאשר לטקסט יש קצב אנכי חזק ומרווח טוב אנו מרגישים שהוא מקצועי, נחשב, סמכותי ונוח לקריאה. כאשר לטקסט יש קצב ומרווח גרועים אנו מרגישים שהוא פחות נחשב, פחות מקצועי ולעתים קשה יותר לקרוא אותו. קצב אנכי הוא שימושיות של חלק אחד ואסתטיקה של חלק אחד.

ניהול הקצב

לרוע המזל האינטרנט הוא עדיין בן הדוד המסכן של הדפוס מבחינת יכולתו לחוקק כמה שיטות בסיסיות בנוגע לסוג. באינטרנט איננו יכולים להשתמש ברשת בסיס באותה צורה שעושה מעצב הדפסה (או ילד בבית הספר) - איננו יכולים ליישר את קו הבסיס של הטקסט לרשת הבסיס של המסמך. ל- CSS אין מושג של רשת בסיס. לכן, הטקסט שלנו לא יישב בדיוק על הקווים של רשת בסיס. במקום זאת, הוא יהיה מרוכז אנכית בפער בין השורות. זה הכי טוב שהרשת יכולה לעשות.

בואו נהיה מעשיים עם מסמך לדוגמא. ראשית, נקבע את הקצב על ידי יצירת רשת בסיס גלויה לעין. לשם כך נשתמש בתמונת רקע חוזרת לציור קווים אופקיים רגילים של 22 פיקסלים זה מזה:

1. html {רקע: #fff url (baseline_22.png); }

Hurra, יש לנו את הנייר המרופד שלנו!

תוכלו לציין ששום דבר לא מסתדר. כדי שהכל יתיישר, אנחנו רוצים שהקצה התחתון של כל האלמנטים יפגע באחת מהשורות האלה. הדרך הקלה ביותר לעשות זאת היא לוודא שכל האלמנטים תופסים גובה אנכי (כולל שוליים) שהוא מכפלה של 22. הנה כמה CSS שעושה בדיוק את זה. אני משתמש ביחידת ה- REM, אך נותן נזילות EM לדפדפנים שאינם מבינים REM. אני כולל גם את המקבילה ליחידת 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 {/ * השוליים העליונים והתחתונים שניהם 22 פיקסלים * /
6. / * em fallback * / margin: 1.375em 0;
7. שוליים: 1.375rem 0; }
8. h1 {/ * גודל הגופן הוא 32 פיקסלים, גובה השורה הוא 44 פיקסלים * /
9. / * em fallback * / font-size: 2em;
10. גודל גופן: 2rem; קו גובה: 1.375; }
11. h2 {/ * גודל הגופן הוא 26 פיקסלים, גובה השורה הוא 44 פיקסלים * /
12. / * em fallback * / font-size: 1.75em;
13. גודל גופן: 1.75rem; קו גובה: 1.5714285714; }
14. h3, h4, h5, h6 {/ * גודל הגופן הוא 22 פיקסלים, גובה השורה הוא 22 פיקסלים * /
15. / * em fallback * / font-size: 1.375em;
16. גודל גופן: 1.375rem; קו גובה: 1; }
17. p, ul, blockquote {/ * השוליים התחתונים הם 22 פיקסלים, גובה השורה עובר בירושה מ- html (22 פיקסלים) * /
18. / * em fallback * / margin-top: 0; שוליים למטה: 1.375em;
19. שוליים-עליון: 0; שוליים למטה: 1.375rem; }

בואו נסתכל מה זה נותן לנו. שימו לב איך כל הטקסט מתיישר יפה? זה לא יושב על בסיס הבסיס, אבל יש לו קצב אנכי צפוי. זה נחמד ומסודר.

התמודדות עם תמונות

תמונות הופכות את הדברים למסובכים יותר. תסתכל מה קורה לקצב שלנו כשאנחנו כוללים כמה. הם משבשים את זה כמו דילוג על תקליט - הקצב נכון אבל העיתוי אינו פעיל. היישור הופך להיות שונה. הסיבה לכך היא שלא סביר שתמונות יהיו בעלות גובה שהוא מכפיל מקו הבסיס, כך שהקצה התחתון אינו מסתדר עם רשת הבסיס שלנו.

כדי לתקן את כל מה שאנחנו באמת צריכים לעשות זה להוסיף שוליים לכל תמונה, מה שהופך את החלק התחתון של השוליים לעמוד בקנה אחד עם הרשת שלנו. וזה מספיק פשוט כדי להפוך אוטומטית עם מעט JavaScript. הנה התוכנית הבסיסית שלנו:

1. מצא את גובהה של כל תמונה.
2. ראה כמה פעמים ערך הבסיס מתחלק למרחב האנכי שהתמונה תופסת כרגע, וקבל את השאר.
3. מחסירים את השארית מקו הבסיס כדי לתת את הקיזוז שעלינו להחיל על התמונה.
4. החל את הקיזוז כשוליים בתחתית התמונה.

החלק התחתון של החלל האנכי של התמונה יתאים כעת נכון לרשת הבסיס. הנה פונקציה בסיסית ב- jQuery שעושה את זה:

1. $ (חלון) .bind ('load', function () {
2. $ ("img"). כל אחד (פונקציה () {
3. / * משתנים * /
4. var this_img = $ (זה);
5. var baseline = 22;
6. var img_height = this_img.height ();
7. / * לעשות את המתמטיקה * /
8. שארית var = parseFloat (img_height% baseline);
9. / * כמה אנחנו צריכים להוסיף? * /
10. var offset = parseFloat (שאר הבסיס);
11. / * החל את השוליים על התמונה * /
12. this_img.css ("שוליים תחתונים", קיזוז + "px");
13. });
14. });

למה window.bind קַו? מכיוון שעלינו להמתין עד לטעינת התמונות לפני שנוכל לקבל את הגודל שלהן באופן אמין. הנה דוגמה עם הפעלת קוד בסיסי זה.

שיפור ה- jQuery

העולם רק לעתים רחוקות ישר קדימה, וכך מתברר כאן - עלינו להתמודד עם לא מעט פרטי יישום. מה רע בפונקציה שיש לנו? שפע:

• זה מייצר תוצאות מגעילות עם תמונות מוטבעות ולא צפות או חסומות.
• זה נראה מטושטש בתמונות מסוימות, במיוחד בתמונות המכולות.
• זה לא מתמודד עם פריסות נוזליות.
• זה לא מאוד לשימוש חוזר.

איננו רוצים ליישם התנהגות זו על תמונות המורכבות, כמו פרצוף החיוך בדוגמה. תמונות מוטבעות מיושרות כך שהקצה התחתון יושב על אותו קו בסיס כמו הטקסט (לֹא רשת הבסיס). כלומר התמונה מקוזזת אנכית. לא CSS ולא JS נותנים לנו דרך לגלות היכן קו הבסיס של אלמנט טקסט, כך שלא נדע את הקיזוז. עלינו להתעלם מתמונות מוטבעות, ולהחיל את התיקון שלנו רק על תמונות מוגדרות בלוק תצוגה (למרבה המזל, כל תמונה צפה מוגדרת אוטומטית להצגת בלוק).

אם תמונה נמצאת במיכל השוליים המופעלים על התמונה עשויים להיות מוסתרים בגלל הגדרות הצפה על המיכל. כמו כן, ייתכן שלא נרצה את השוליים בתמונה, אלא את אלמנט המיכל במקום זאת. בדוגמה נעדיף שיהיו שוליים על הקופסה הלבנה מאשר על התמונה שבתוך הקופסה, כך שנוכל להימנע מקבלת פערים מוזרים שמופיעים בתיבה.

הפונקציה פועלת רק פעם אחת, אך בתכנון נוזלי התמונות משנות גובה כאשר הגודל של הדפדפן מחדש (נסה לשנות את גודל הדוגמה למשהו די צר כדי לראות זאת). שינוי הגודל שובר את הקצב שוב. אנו זקוקים לפונקציה להפעלה לאחר שינוי גודל הדפדפן וכן לאחר טעינת הדף. פריסות נוזליות מציגות גם בעיות אחרות; תמונות יכולות להיות בגודל פיקסלים חלקי, למשל 132.34 פיקסלים. זה בתורו יכול לגרום לתוצאות בלתי צפויות, גם אם אנו מיישמים מרווח חלקי (אם אתה מעוניין, הנה הסיבה: trac.webkit.org/wiki/LayoutUnit). לכן, נצטרך לעסות את התמונה לגובה פיקסל שלם כדי למנוע באגים בפריסה הנגרמים על ידי פיקסלים חלקים.

לבסוף, עלינו להפוך את זה לפונקציה שניתנה לשימוש חוזר יותר. למעשה, עם המורכבות שדרוש פתרון מעשי על פני הפתרון התיאורטי, עלינו להכין תוסף שניתן להשתמש בו מחדש בפרויקטים אחרים.

בדוגמה האחרונה תמצא את הקוד שמשיג את כל זה. על התוסף JavaScript יש הערות רבות כדי שתוכל לעקוב אחריו. תוכל להשתמש בפלאגין על ידי קריאה אליו באופן הבא:

1. $ (חלון) .bind ('load', function () {
2. $ ("img"). baselineAlign ();
3. });

לחלופין, תוכל להורות לפלאגין להחיל את השוליים על מיכל בשם, אם קיים הורה לתמונה:

1. $ (חלון) .bind ('load', function () {
2. $ ("img"). baselineAlign ({container: ’. popup '});
3. });

סיכום

שמירה על קצב אנכי טוב היא תרגול עיצוב עדין אך יעיל המשמש באופן קבוע בדפוס. כעת אתה מכיר את העקרונות הבסיסיים, בעל ידע בעבודה על קווי הבסיס ועל רשת הבסיס, ויודע כמה מהמגבלות של פריסת טקסט CSS לעומת הדפסה. אתה גם יודע לעקוף את המגבלות האלה, לחבר את המסמכים שלך לכל קצב אנכי שאתה אוהב, ויש לך כלי שיעזור להתמודד עם תוכן תמונה משבש.

עם התבגרות CSS אנו ממשיכים לקבל יותר תכונות בשורה אחת עם בני דודינו המודפסים, כך שהבנה טובה של סוג תהיה חשובה יותר ליצירת אתרים איכותיים. אם ברצונך ללמוד עוד על סוג באופן כללי אני ממליץ בחום על www.thinkingwithtype.com (ולקנות את הספר שילווה אותו). אם אתה מחפש מאמרים בנושא CSS בנושא טיפוסים, ישנם מאמרים רבים גם כאן וגם במקומות אחרים באינטרנט. אני ממליץ גם להתעדכן במאבק האחרון של מארק בולטון ואליוט ג'יי סטוקס, שניהם מדברים לעתים קרובות על סוג ביחס לעיצוב אתרים באופן ספציפי.

תעשה חיים!