ההשקה מ-Chrome בגרסה 119 ל-123 היא תכונת 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. עכשיו אפשר להציג את כל השלושה בצורה אנכית באמצעות המאפיין writing-mode ב-CSS.
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.