אנחנו משיקים את התכונה החדשה של 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.