ליישר קו עם המאפיין יישור טקסט CSS

ליישר קו עם המאפיין יישור טקסט CSS

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





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



היסודות של נכס יישור הטקסט של CSS

יישור הוא אחד ממונחי הטיפוגרפיה המוכרים ביותר. בהקשר של CSS, יישור טקסט מתייחס ליישור אופקי.





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

כיצד להכין אנטנת טלוויזיה תוצרת בית

כברירת מחדל, בשפה משמאל לימין (עוד מזה בהמשך), הטקסט מיושר לשמאל:



ב- CSS, זהה לזה של:

p { text-align: left; }

אוֹ:



p { text-align: start; }

קָשׁוּר: מה הם גיליונות סגנון מדורגים ולמה משמש CSS?

אתה יכול להשתמש בערכים אחרים עבור יישור טקסט תכונה לשינוי יישור אופקי. הערכים הנפוצים ביותר מוכרים מאפליקציות לעיבוד תמלילים:



text-align: left
text-align: center
text-align: right

השתמש בהצדקה ליישור קצוות שמאל וימין

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

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

העברת קבצים מהמחשב לטלפון

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

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

נכס CSS נוסף, text-align-last , גמיש יותר ויש לו תמיכה טובה יותר. אתה יכול להתייחס לזה פחות או יותר כמו יישור טקסט , אבל זה חל רק על השורה האחרונה:

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

יישור טקסט וכיווני קריאה

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

direction: rtl;

שפות אלה בדרך כלל מיישרות טקסט ימינה כברירת מחדל.

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

כיצד להעביר דף במילה

שימוש הַתחָלָה אוֹ סוֹף פירושו שללא קשר לכיוון הטקסט, היישור הוא עקבי.

כיצד אלמנטים יורשים את המאפיין ליישור טקסט

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

שימוש במאפיין יישור הטקסט לשליטה בפריסה

אתה יכול להשתמש ב יישור טקסט מאפיין CSS כדי להגדיר כיצד דפדפנים פורסים טקסט אופקית. הערכים הנפוצים ביותר הם שמאלה , ימין , מֶרְכָּז , ו לְהַצְדִיק . אלה הם די פשוטים, אם כי לְהַצְדִיק מציג מורכבות מסוימת.

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

ה יישור טקסט property הוא אחד מנכסי CSS רבים המספקים עיצוב שימושי ומיקום בסיסי.

לַחֲלוֹק לַחֲלוֹק צִיוּץ אימייל 10 דוגמאות קוד CSS פשוטות שתוכל ללמוד תוך 10 דקות

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

קרא הבא נושאים קשורים
  • תִכנוּת
  • בניית אתרים
  • עיצוב אתרים
  • CSS
על הסופר בובי ג'ק(58 מאמרים פורסמו)

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

עוד מאת בובי ג'ק

הירשם לניוזלטר שלנו

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

לחצו כאן להרשמה