טיפוגרפיה נוזלית היא א דרך מהודרת של "תיאור מאפייני גופן, כגון גודל או גובה קו, המתארכים בצורה זורמת בהתאם לגודל נקודת התצוגה". שֶׁלָה ידוע גם בשמות אחרים, כמו טיפוגרפיה רספונסיבית, סוג גמיש, סוג נוזלי, טיפוגרפיה בגודל נקודת מבט, טיפוגרפיה קולחת, ואפילו טקסט תצוגה רספונסיבי.
הנה דוגמה לטיפוגרפיה נוזלית שאתה יכול לשחק בשידור חי (באדיבות תיעוד MDN). CSS-Tricks סיקרה טיפוגרפיה קולחת גם בהרחבה. אבל הנקודה כאן היא לא להציג בפניכם טיפוגרפיה קולחת, אלא כיצד להשתמש בה. ליתר דיוק, אני רוצה להראות לכם כיצד ליישם טיפוגרפיה נוזלית בוורדפרס 6.1 שהציגה לאחרונה תכונה מסוג נוזל ישירות בעורך החסימה של וורדפרס.
פתח את style.css קובץ, להטביע כלל סגנון עם מפואר clamp()-ינג על font-size רכוש, וטוב ללכת, נכון? בטח, זה ייתן לך טקסט קולח, אבל כדי לקבל פקדים של עורך Block המאפשרים להחיל סוג נוזל בכל מקום באתר הוורדפרס שלך? זה דורש גישה אחרת בימים החסומים האלה.
תמיכה בטיפוגרפיה נוזלית בגוטנברג
כמה מפתחי ערכות נושא וורדפרס השתמשו ב- clamp() פונקציה להגדיר נוזל font-size, בנושאי וורדפרס שלהם, אפילו בנושאי "חסימה" חדשים יותר כגון עשרים עשרים ושתיים, עשרים עשרים ושלוש, ואחרים.
אבל התוסף גוטנברג - זה שמכיל פיתוח ניסיוני עבור תכונות בלוק וורדפרס ועורך אתרים - הציג תמיכה בטיפוגרפיה זורמת החל מגרסה 13.8. זה פתח את הדלת להטמעה ברמת נושא כך שניתן להחיל סוג נוזל על אלמנטים ובלוקים ספציפיים ישירות בעורך הבלוקים. CSS-Tricks אפילו קיבלה צעקה ב- משיכת בקשה שמיזג את התכונה.
העבודה הזו הפכה לחלק מ- WordPress Core ב וורדפרס 6.1. ריץ' תבור, אחד התומכים הקודמים בטיפוגרפיה קולחת בעורך הבלוק אומר:
[טיפוגרפיה נוזלית] היא גם חלק מהפיכת וורדפרס לחזקה יותר, אך לא מסובכת יותר (שכולנו יודעים שזה די האתגר). […] טיפוגרפיה נוזלית פשוט עובדת. למעשה, אני חושב שזה עובד מצוין.
זֶה הפוך את הדגשים לפוסטים בוורדפרס הגישה שננקטה כדי לתמוך בתכונה ברמת הבלוק כך שגודל גופן נוזלי יוחל על בלוקים באופן דינמי כברירת מחדל. יש כמה הטבות לזה כמובן:
- הוא מספק דרך למחברי נושאים להפעיל טיפוגרפיה זורמת מבלי לדאוג ליישם אותה בקוד.
- הוא מחיל טיפוגרפיה קולחת על ישויות טיפוגרפיות ספציפיות, כגון אלמנטים או בלוקים באופן שניתן לתחזוקה ולשימוש חוזר.
- זה מאפשר גמישות במונחים של יחידות גודל גופן (למשל
px,rem,em, ו%).
כעת, כשהתכונה החדשה הזו זמינה כברירת מחדל בעורך החסימות של וורדפרס, מחברי ערכות נושא יכולים ליישם טיפוגרפיה זורמת אחידה מבלי לכתוב קוד נוסף.
בלוקים התומכים בהגדרות טיפוגרפיה ומרווחים
גוטנברג 14.1 פורסם ב -16 בספטמבר 2022, והציג הגדרות טיפוגרפיות על חבורה של בלוקים. זה אומר שהגדרות הטקסט עבור אותם בלוקים נקבעו ב-CSS בעבר והיה צורך לשנות גם ב-CSS. אבל בלוקים אלה מספקים כעת פקדי גופנים ומרווחים בממשק Block Editor.
עבודה זו מתוכננת כעת להתווסף לוורדפרס 6.1, כמפורט ב זה צור פוסט בבלוג של WordPress. ואיתו מספר מורחב של בלוקים עם תמיכה בטיפוגרפיה.
הכרזה על סוג נוזל בעיצוב בלוק וורדפרס
אז איך נכניס את הטיפוגרפיה הזולה החדשה הזו לשימוש בוורדפרס? התשובה נמצאת בפנים theme.json, קובץ חדש ספציפי לחסימת ערכות נושא שמכיל חבורה של תצורות ערכות נושא בזוגות מפתח:ערך.
בואו נסתכל על כלל עבור גופן גדול ב theme.json איפה contentSize: 768px ואנחנו עובדים עם א widesize: 1600px מַעֲרָך. כך נוכל לציין CSS font-size באמצעות clamp() פוּנקצִיָה:
"settings": {
"appearanceTools": true,
"layout": {
"contentSize": "768px",
"wideSize": "1600px"
},
"typography": {
"fontSizes": [
{
"name": "Large",
"size": "clamp(2.25rem, 6vw, 3rem)",
"slug": "large"
}
]
}
}החל מ-WordPress 6.1, בלבד rem, em ו px יחידות נתמכות.
זה נהדר ועובד, אבל עם התכונה החדשה של סוג הנוזל היינו משתמשים בגישה אחרת. ראשית, אנו בוחרים להשתמש בטיפוגרפיה קולחת settings.typography, שיש לו חדש fluid נכס:
"settings": {
"typography": {
"fluid": true
}
}לאחר מכן אנו מציינים את שלנו settings.fontSizes כמו קודם, אבל עם חדש fluidSize נכס שבו נוכל להגדיר את min ו max ערכי גודל עבור טווח סוגי הנוזלים שלנו.
"settings": {
"appearanceTools": true,
"layout": {
"contentSize": "768px",
"wideSize": "1600px"
},
"typography": {
"fontSizes": [
{
"size": "2.25rem",
"fluidSize": {
"min": "2.25rem",
"max": "3rem"
},
"slug": "large",
"name": "Large"
}
]
}
}זה באמת זה. פשוט הוספנו סוג נוזל לגודל גופן שנקרא "Large" עם טווח שמתחיל ב 2.25rem ומדרג עד 3rem. כעת, אנו יכולים להחיל את הגופן "גדול" על כל בלוק עם הגדרות גופן.
איך זה עובד מתחת למכסה המנוע? ריץ' תבור מציע הסבר נחמדכמו גם בקשת משיכה זו ב-GitHub. בקיצור, וורדפרס ממירה את theme.json מאפיינים לתוך כלל ה-CSS הבא:
.has-large-font-size {
font-size: clamp(36px, calc(2.25rem + ((1vw - 7.68px) * 1.4423)), 48px);
}...אשר מוחל על האלמנט, אמור בלוק פסקה:
...
בתחילה, התקשיתי להבין ולעטוף במוחי את המושג CSS clamp() לתפקד מבלי ללמוד גם על min(), max(), ו calc() פונקציות. כלי מחשבון זה עזר לי לא מעט, במיוחד לקביעה באילו ערכים להשתמש בפרויקטי הנושא שלי.
למטרות הדגמה, בואו נשתמש במחשבון כדי להגדיר את שלנו font-size טווח כך שהגודל הוא 36px בכל 768px רוחב יציאת התצוגה ו 48px בכל 1600px רוחב יציאת התצוגה.
המחשבון יוצר אוטומטית את ה-CSS הבא:
/* 36px @ 768px increasing to 48px @ 1600px */
font-size: clamp(36px, calc(2.25rem + ((1vw - 7.68px) * 1.4423)), 48px);המחשבון מספק אפשרויות לבחירת יחידות קלט px, rem, ו em. אם נבחר rem יחידה, המחשבון יוצר את הדברים הבאים clamp() ערך:
/* 2.25rem @ 48rem increasing to 3rem @ 100rem */
font-size: clamp(2.25rem, calc(2.25rem + ((1vw - 0.48rem) * 1.4423)), 3rem);אז ערכי המינימום והמקסימום האלה תואמים את ה- fluidSize.min ו fluidSize.max ערכים ב theme.json. ה min הערך מוחל בנקודות תצוגה שכן 768px רחב ומטה. אז ה font-size גדל ככל שרוחב יציאת התצוגה גדל. אם נקודת התצוגה רחבה יותר מ 1600px, ה max מוחל וה font-size מוגבל שם.
דוגמאות
יש הוראות בדיקה מפורטות ב-Pull Request הממוזג שהציג את התכונה. יש אפילו יותר הוראות בדיקה מ פוסט ההקדמה של ג'סטין טדלוק ב- Make WordPress.
דוגמה 1: הגדרת הגדרה חדשה של גופן נוזלי
בואו נתחיל עם סט ההוראות של ג'סטין. השתמשתי בגרסה שונה של ברירת המחדל נושא עשרים עשרים ושלוש שנמצא כרגע בפיתוח.
ראשית, בואו נוודא שאנו מפעילים את הפלאגין גוטנברג (13.8 ומעלה) או וורדפרס 6.1, ולאחר מכן בחרו בסוג נוזלי ב- settings.typography.fluid נכס באזור theme.json קובץ:
{
"version": 2,
"settings": {
"appearanceTools": true,
"layout": {
"contentSize": "768px",
"wideSize": "1600px"
},
"typography": {
"fluid": true
}
}
}עכשיו, בואו נשאיר את settings.typography.fontSizes דוגמאות שם:
{
"version": 2,
"settings": {
"appearanceTools": true,
"layout": {
"contentSize": "768px",
"wideSize": "1600px"
},
"typography": {
"fluid": true
"fontSizes": [
{
"name": "Normal",
"size": "1.125rem",
"fluid": {
"min": "1rem",
"max": "1.5rem"
},
"slug": "normal"
}
]
}
}
}אם הכל עובד כשורה, כעת נוכל להיכנס לעורך החסימות של וורדפרס ולהחיל את הגדרת הגופן "רגיל" על הבלוק שלנו:
נֶחְמָד! ואם נשמר ונבדוק את הרכיב הזה בקצה הקדמי, זה הסימון:
טוב מאוד. עכשיו בואו נוודא שה-CSS אכן קיים:
טוב טוב. בוא נחשוף את מאפיין ה-CSS המותאם אישית הזה כדי לראות אם הוא באמת מהדק דברים:
נראה שהכל עובד בדיוק כמו שאנחנו רוצים! בואו נסתכל על דוגמה נוספת…
דוגמה 2: אי הכללת הגדרת גופן מסוג נוזלי
הפעם, בואו נעקוב אחר הוראות מ-Pull Request הממוזג עם קריצה לדוגמא זו של קרולינה נימרק, שמראה כיצד אנו יכולים לבטל סוג נוזל בהגדרת גופן ספציפית.
אני משמש נושא ריק כפי שהומלץ בהוראות ופתח את theme.json קובץ לבדיקה. ראשית, אנו בוחרים בסוג נוזל בדיוק כפי שעשינו קודם:
{
"version": 2,
"settings": {
"appearanceTools": true,
"layout": {
"contentSize": "768px",
"wideSize": "1000px"
},
"typography": {
"fluid": true
}
}
}הפעם, אנחנו עובדים עם קטן יותר wideSize ערך של 1000px במקום 1600px. זה אמור לאפשר לנו לראות את סוג הנוזל עובד בטווח מדויק.
אוקיי, על הגדרת כמה גדלי גופן מותאמים אישית תחת settings.typography.fontSizes:
{
"version": 2,
"settings": {
"typography": {
"fluid": true,
"fontSizes": [
{
"size": ".875rem",
"fluid": {
"min": "0.875rem",
"max": "1rem"
},
"slug": "small",
"name": "Small"
},
{
"size": "1rem",
"fluid": {
"min": "1rem",
"max": "1.5rem"
},
"slug": "normal",
"name": "Normal"
},
{
"size": "1.5rem",
"fluid": {
"min": "1.5rem",
"max": "2rem"
},
"slug": "large",
"name": "Large"
},
{
"size": "2.25rem",
"fluid": false,
"slug": "x-large",
"name": "Extra large"
}
]
}
}
}שימו לב שהחלנו את תכונת סוג הנוזל רק בהגדרות הגופנים "רגיל", "בינוני" ו-"גדול". "Extra Large" הוא המוזר שבו fluid האובייקט מוגדר ל false.
מה וורדפרס עושה מכאן - דרך ה מנוע בסגנון גוטנברג - הוא להחיל את המאפיינים שהגדרנו ב-CSS clamp() פונקציות עבור כל הגדרת גודל גופן שהצטרפה לסוג נוזל וערך גודל יחיד עבור ההגדרה Extra Large:
--wp--preset--font-size--small: clamp(0.875rem, 0.875rem + ((1vw - 0.48rem) * 0.24), 1rem);
--wp--preset--font-size--medium: clamp(1rem, 1rem + ((1vw - 0.48rem) * 0.962), 1.5rem);
--wp--preset--font-size--large: clamp(1.5rem, 1.5rem + ((1vw - 0.48rem) * 0.962), 2rem);
--wp--preset--font-size--x-large: 2.25rem;בוא נבדוק את הסימון בקצה הקדמי:
התחלה טובה! בואו נאשר כי .has-x-large-font-size מחלקה אינה נכללת מסוג נוזל:
אם נחשוף את --wp--preset--font-size--x-large משתנה, נראה שהוא מוגדר ל 2.25rem.
זה בדיוק מה שאנחנו רוצים!
ערכות נושא של חסימה התומכות בטיפוגרפיה קולחת
ערכות נושא רבות של וורדפרס כבר עושות שימוש ב clamp() פונקציה עבור סוג נוזל הן בלוק והן בנושאים קלאסיים. דוגמה טובה לשימוש בטיפוגרפיה נוזלית היא הגרסה שיצאה לאחרונה עשרים עשרים ושלוש ערכת נושא ברירת מחדל.
סקרתי את כל נושאי הבלוק מ ספריית נושא החסימה של WordPress, בוחן theme.json קובץ של כל ערכת נושא ולראות כמה ערכות נושא לחסימה תומכות כרגע בטיפוגרפיה זורמת - לא התכונה החדשה מכיוון שהיא עדיין קיימת בתוסף גוטנברג נכון לכתיבת שורות אלה - באמצעות ה-CSS clamp() פוּנקצִיָה. מתוך 146 הנושאים שסקרתי, רובם השתמשו ב-a clamp() פונקציה להגדרת מרווח. קצת יותר ממחצית מהם בשימוש clamp() כדי להגדיר גדלי גופנים. ה אלארה ערכת הנושא היא היחידה לשימוש clamp() להגדרת ה גדלי מיכל פריסה.
מובן, רק כמה ערכות נושא שפורסמו לאחרונה מכילות את התכונה החדשה של טיפוגרפיה נוזלית. אבל הנה אלה שמצאתי שמגדירים את זה theme.json:
ואם אתה קורא את הפוסט הקודם שלי כאן על CSS-Tricks, ה TT2 Gopher Blocks ערכת הנושא שבה השתמשתי להדגמה עודכנה גם היא כדי לתמוך בתכונת הטיפוגרפיה הנוזלת.
תגובות נבחרות לתכונות הטיפוגרפיה הנוזלית של וורדפרס
טיפוגרפיה זורמת בוורדפרס ברמת ההגדרות היא סופר מרגשת! חשבתי לחלוק כמה מחשבות מאנשים בקהילת מפתחי וורדפרס שהגיבו על זה.
מטיאס ונטורה, האדריכל הראשי של פרויקט גוטנברג:
בתור אחד מהמאמצים הגדולים יותר להפוך פרסום של דפים עשירים להפליא בוורדפרס, טיפוגרפיה זורמת היא ניצחון חוויה די גדול הן עבור האנשים שבונים עם וורדפרס - והן עבור אלו שצורכים את התוכן.
מפתח אוטומטי רמון דוד הגיב ב-Pull Request:
הפוך את הרעיון הזה לגדלי גופנים המגיבים לגדלים ספציפיים של יציאת תצוגה, כמו אלה שהוגדרו על ידי שאילתות מדיה, אבל לא לעשות כלום בין הגדלים האלה.
theme.jsonכבר מאפשר למחברים להכניס ערכי גודל גופן זורמים משלהם. זה לא ישתנה, אבל יחסי הציבור הזה מציעים את זה לאנשים שלא רוצים לדאוג לגבי פרטי היישום.
ניק קרופט, מחבר של GenesisWP:
בריאן גארנר, מעצב ומפתח ראשי ב-WPEngine:
כמה מפתחים לחשוב תכונות מסוימות צריכות להיות הצטרפות. ג'ייסון כריסט של Automattic אומר:
אני אוהב את כוחה של טיפוגרפיה זורמת, אבל אני גם לא מאמין שצריך להפעיל אותה כברירת מחדל. השימוש בו (והפרטים שלו) הם החלטות עיצוביות חשובות שצריך להיעשות בזהירות.
אתה יכול גם למצוא עוד המון תגובות ברשמי הוראות בדיקה עבור התכונה.
גלישה את
תכונת הטיפוגרפיה הנזילה בוורדפרס היא עדיין בפיתוח פעיל בזמן כתיבת שורות אלה. אז, כרגע, מחברי הנושא צריכים להמשיך להשתמש בו, אבל בזהירות ולצפות לכמה שינויים אפשריים לפני שהוא ישוחרר רשמית. ג'סטין מזהיר מחברי נושא המשתמשים בתכונה זו ומציעים לשים עין על שתי הבעיות הבאות של GitHub:
יש גם עדיין הרבה עבודה מתמשכת על טיפוגרפיה וכלי וורדפרס אחרים הקשורים לעיצוב. אם אתה מעוניין, צפה בזה טיפוגרפיה מעקב אחר כרטיס GitHub ו כלי עיצוב הקשורים לבעיות GitHub.
משאבים
השתמשתי במאמרים הבאים בעת מחקר על סוג נוזל וכיצד וורדפרס מיישמת אותו כתכונה.
