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

Di Zhang
Di Zhang

ההשקה של גרסה 119 עד 123 של Chrome היא תכונת CSS בינלאומית חדשה מבית CSS. מצבי כתיבה רמה 4. ענף/תחום במצב כתיבה לרכיבים של פקדי צורה, שמוצגות במצבי כתיבה אנכית. החל מגרסה 123 של Chrome, התכונה תופעל לכל המשתמשים, בפוסט הזה מוסבר על התכונה.

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

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

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

דוגמה למצבי כתיבה אנכיים

הנה כמה דוגמאות בינלאומיות של פקדי צורה אנכית.

לחצנים

<html lang="zh">

<button>请点击</button>

button {
  writing-mode: vertical-rl;
}

לחצן עם טקסט אנכי.

<select> מרכיבים

אפשר לציין שרכיב <select> יציג את כל הטקסט במאונך.

select {
  writing-mode: vertical-lr;
}

<select multiple>
  <option>日本語  
  <option>中文
  <option>English
  <option>français
  <option>فارسی
</select>

<select>
  <option>日本語  
  <option>中文
  <option>English
  <option>français
  <option>فارسی
</select>

רשימה נבחרת עם טקסט אנכי.

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

קלט מבוסס-טקסט

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

textarea {
  writing-mode: vertical-rl;
  width: 5em;
  height: 20em;
}

<textarea>
古池や蛙飛び込む水の音
ふるいけやかわずとびこむみずのおと
</textarea>

אזור טקסט עם טקסט אנכי.

ריצ'רץ'

כמו כן, מומלץ להציג באופן חזותי את הערך של רכיב טופס. זה מה כמו <meter>, <progress> ו-<input type=range>.

מגוון פקדי פס הזזה.

בעבר, היה אפשר לעבד רק <range> אנכית באמצעות שירות ה-CSS הלא סטנדרטי ערך המראה slider-vertical. עכשיו ניתן להציג את כל השלושה באופן אנכי באמצעות מאפיין ה-CSS writing-mode.

input[type="range"], meter, progress {
  writing-mode: vertical-lr;
}

פקדי פס ההזזה מוצגים לאורך.

כברירת מחדל, כיוון ה-CSS מוגדר כ-ltr. המשמעות היא שהערכים מעובדת מלמעלה למטה. אפשר לציין את הכיוון של הערך למטה למעלה על ידי הגדרת הכיוון כ-rtl.

input[type="range"], meter, progress {
  writing-mode: vertical-lr;
  direction: rtl;
}

פקדי השקפים מוצגים אנכית מלמטה עד למעלה.

יש ניסוי לשינוי כיוון הערך ב-Chrome 122. נשמח לקבל ממך משוב.

מעורבות ושיתוף משוב

כדי לשתף משוב על התכונות האלה, אפשר לדווח על בעיה בכתובת crbug.com.