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

Di Zhang
Di Zhang

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

אחרי שהתכונה הזו תופעל במלואה, תוכלו להשתמש במצבי כתיבה אנכיים ברכיבי בקרה של טפסים, כמו לחצנים, רשימות לבחירה ורכיבי התקדמות. כדי להשתמש בו, מגדירים את מאפיין ה-CSS writing-mode לערך 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.