Куточок CSS: властивість writing-mode, Різне, Інтернет-технології, статті

Як багато з вас знають, властивість writing-mode дозволяє виводити текст для мов, відмінних від латинського, і, зокрема, арабського або японської мов. Незважаючи на те, що воно підтримувалося з часів IE 5.5, в IE8 дане властивість було кардинально оновлено. У нас було три мети:



В сьогоднішній статті ми поговоримо про основи нової реалізації даного методу та первинної необхідної для експериментів інформації. Також ми чекаємо ваших даних зворотного зв’язку!

Основи: властивості і значення
За визначенням CSS3 Text Layout, властивість writing-mode є свого роду стенографією властивостей “direction” і “block-progression”. Напрямок може бути позначено як потік символів в рядку, а послідовність блоків – як напрямок потоку рядків. Представлена ​​нижче таблиця (заснована здебільшого на офіційних специфікаціях) показані вісім можливих значень:
















































writing-mode  direction  block-progression  Застосування 
lr-tb ltr Tb Латинські, грецькі і кириличні системи (і багато інших)
rl-tb rtl Tb Арабська і іврит
tb-rl ltr Rl Східно-азіатські системи з вертикальним листом
bt-rl rtl Rl Блокування сценарієм арабських мов в східно-азіатськими мовами з вертикальним листом
tb-lr ltr Lr Монгольська система
bt-lr rtl Lr Блокування сценарієм арабських мов в монгольських документах
lr-bt ltr Bt Відсутня
rl-bt rtl Bt Відсутня

Зверніть увагу, що в двох останніх варіантах представлені непідтверджені комбінації, тому що ні одна мова у світі або система письма її не використовують. У IE8 їх підтримка була реалізована для повноти.

При осмисленні виведення вертикального тексту важливо розуміти, що значення ширини і висоти можуть змінитися в залежності від вмісту. Ми завжди звертаємося до ширини та висоті, як до фізичних властивостях, тобто ширина завжди горизонтальна, а висота – вертикальна. Крім того, лівий край, верх, правий край і низ також розглядаються фізичними величинами.

Найкращим способом розуміння writing-mode і вертикального тексту є приклади. Представлений нижче приклад допоможе вам зрозуміти завдання розмірів, переповнення і таблиці.

Розміри блоків
Алгоритми вертикального завдання розмірів змінюють розрахунки висоти і ширини, так що алгоритм, який використовувався для ширини в горизонтальному виводі, тепер використовується для висоти при вертикальному висновку.

Уявімо наступний приклад:



Висота і ширина двох div-елементів не вказана: перший елемент паралельний батьківського body, а другий перпендикулярний, так як режим writing-mode виставлений на tb-lr. Зверніть увагу, що ширина першого елемента div дорівнює ширині вікна перегляду, а його висота – обсягом вмісту. Це звичайне поведінку CSS.

Розмір другого div-блоку повністю аналогічний, тільки висота і ширина помінялися місцями – висота тепер дорівнює висоті вікна перегляду, а ширина – обсягом вмісту.

Зверніть увагу, що в даному прикладі використовується вікно перегляду, але якщо була вказана висота елементу body, то це значення буде використовуватися для автоматичного розрахунку висоти. Причина даного наказу полягає в тому, що користувач може прокрутити сторінку до вертикального контенту (якщо перший горизонтальний div був занадто довгим), а потім почати прокручувати по горизонталі, при цьому всі вертикально розміщене вміст буде вміщатися у вертикальний розмір вікна перегляду.

Даний приклад стане цікавіше, якщо додати другий вертикальний елемент div, але на цей раз вже з відносним значенням розміру:



Ширина другого вертикального елемента div встановлена ​​на 50%: Зверніть увагу, що його ширина є 50% вікна перегляду (body).

Також зверніть увагу на те, що останній блок з’являється під попереднім, так як потік блоків батька (body) має значення зверху-вниз. Логічно припустити, що режим writing-mode елемента впливає на розташування послідовності блоків самого елемента, але суть не в цьому. Зміна розташування послідовності блоків в body на LR поставило б блоки поруч з один одним. Однак якщо BODY буде виходити за краї по горизонталі, то вихід за краї відбуватиметься відповідно до напряму правопису батька. В даному випадку це HTML елемент з властивостями LR-TB, таким чином вихід за краї відбуватися в праву сторону, тим самим ховаючи початок контенту. Цей маленький момент дуже важливий, так як більшість користувачів чекають, що первісна точка (та, в якій з’являється перша буква контенту) буде видима незалежно від переповнення. Причина в даному випадку в тому, що переповнення вліво і вгору (що передбачає напрям заповнення LR-TB) не є прокручується, і, отже, закріплюється областю.

Переповнення при виведенні вертикального тексту
Обробка переповнення при виведенні вертикального тексту все ще обговорюється. IE8 позиціонує панелі прокрутки відповідно напрямку переповнення, тобто, якщо вміст при переповненні переходить в ліву частину елемента, то вертикальна смуга прокрутки буде відображатися ліворуч.

Уявіть собі приклад, коли у елемента фіксований розмір, режим writing-mode має значення bt-rl і є вміст, що перевищує розміри блоку.



Зверніть увагу на розташування смуг прокрутки, а також їх первинний стан. Так як початок вмісту є фізичною нижньою гранню елемента, то це і є явна позиція вертикальної смуги прокрутки.

Ще один цікавий випадок має місце, коли елемент занадто широкий для вікна, таким чином створюючи смуги прокрутки вікна перегляду:



Початок тексту знаходиться за екраном і користувач повинен прокрутити вправо, щоб побачити його. Крім того, вертикальна смуга прокрутки недоступна після того, як користувач прокрутив її вправо. Це може здатися дивним, але це очікуваний результат, так як напрям батька (body) LR-TB. При розробці сторінок зі змішаним режимом виведення обов’язково беріть до внімніе ефекти переповнення.

Вертикальний висновок і таблиці
У випадку з вертикальними таблицями строчки встануть по вертикалі, а колонки – по горизонталі. Використання наступного коду:


Код:
<body writing-mode=”??-??”>
ABCDEF
<table>
<tr>
<td> 1 </td> <td> 2 </td> <td> 3 </td>
</tr>
<tr>
<td> 4 </td> <td> 5 </td> <td> 6 </td>
</tr>
<tr>
<td> 7 </td> <td> 8 </td> <td> 9 </td>
</tr>
</table>
</body>

призведе до наступного результату у всіх восьми можливих випадках:



Схема створення розміру таблиці працює за тим же принципом, що і у випадку з текстовими полями: розрахунки висоти і ширини міняються місцями. Алгоритми підрахунку ширини осередку, колонки і таблиці будуть використовувати значення висоти. А алгоритми підрахунку висоти комірки, рядки і таблиці будуть використовувати значення ширини.

Відступи, межі і процентні значення
Більшість веб-розробників, які використовують CSS для розробки своїх сайтів, знають, що для розуміння згортання полів потрібен час. Саме тому однією з наших цілей при розробці та реалізації безлічі напрямків написання було максимально обмежити будь-яку додаткову складність в логіці згортання кордонів. По суті, згортання кордонів відповідає правилам CSS 2.1, наведеним у частині 8.3.1. Єдина різниця полягає в тому, що кордони згортаються в напрямку знаходження послідовності блоків. Причиною цьому є те, що якщо перпендикулярний блок змінює свій напрям (всередині стає вертикальним, а не горизонтальним), то зміна напрямку елемента набуває контекст блокування форматування. Як наслідок, жодна з меж цього вкладеного елемента (вертикального) не згортається разом з ним. Це можна побачити на наступному прикладі. Зверніть увагу, що жоден із вкладених блоків не згортає свої кордони відповідно контейнера (темно-синій блок), навіть при те, що контейнер не має меж.



Процентні значення відступів і кордонів розраховуються на основі логічної ширини. Тобто розрахунковим значенням ширини, якщо батьківський елемент горизонтальний, або розрахунковим значенням висоти, якщо батьківський елемент вертикальний.

Схожі статті:


Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*