Від автора: деколи крихітні деталі, які більшою мірою ніхто не помічає, можуть як позитивно, так і негативно позначитися на користувальницькому досвіді. До таких деталей відносяться такі речі, як тоненька тінь заголовка або добре підібране відстань між елементами на веб-сторінці.
В цьому відношенні властивість text-align-last виявляється вкрай корисним. Властивість задає вирівнювання останнього рядка в блоці або рядки, що знаходиться перед розривом. Це дуже важливий момент, тому що найчастіше останній рядок у параграфі заповнюється не повністю. Ви можете взагалі не помітити змін, але вони позитивно позначаться на загальному вигляді всього сайту.
У цьому уроці ми детально розберемо всі аспекти властивості text-align-last, можливі значення, підтримку і поведінку даної властивості в окремих браузерах.
Застосування і можливі значення
Працювати з властивістю text-align-last дуже просто. Нижче показано, як вирівняти останній рядок тексту по правому краю:
.intro-graph {
text-align: justify; // Required for IE and Edge
text-align-last: right;
}
Властивість може приймати 7 можливих значень. Звичайні значення вам, швидше за все, знайомі. Це left, right і венеції. Ці значення вирівнюють текст на останньому рядку по лівому, правому краях і центру контейнера відповідно. У демо нижче можна побачити різницю між трьома значеннями:
Четверте значення justify-вирівнює текст на останньому рядку по ширині контейнера (текст розтягується до лівого і правого країв). В даному випадку між словами додається потрібну кількість прогалин. Якщо тексту на останньому рядку буде достатньо, то дане значення можна використовувати для заповнення всієї рядка. У такому разі пробіли між словами не будуть здаватися надто великими. Текст у другому параграфі також вирівняний по ширині. Однак з-за того, що в останньому рядку всього одне слово, воно вирівняно по лівому краю.
Ліве вирівнювання останнього рядка тексту прекрасно працює з мовами, видимими зліва направо (LTR мови), однак для арабської мов групи (коли слова читаються справа наліво (RTL) таке вирівнювання зовсім не підходить. У таких випадках якщо ви не знаєте заздалегідь, які мови будуть використовуватися, із значеннями left і right можуть виникнути проблеми.
На щастя, для вирівнювання тексту по стартовій точці рядка на основі напрями тексту можна використовувати ключове слово start. Тобто властивість text-align-last: start буде вирівнювати текст по лівому краю в LTR мовах і по правому краю в RTL мови. Точно таким же чином можна використовувати значення end для вирівнювання тексту по кінцевій точці в залежності від його напряму. В такому випадку текст буде вирівняно по правому краю в LTR мовах і по лівому в RTL мови.
Значення auto є значенням за замовчуванням. Якщо задати це значення, текст на останньому рядку буде вирівнюватися, виходячи із значення властивості text-align, якщо останнє не має justify. Зі значенням justified текст буде вирівняно по ширині тільки у випадку, якщо властивість text-justify задано в distribute. В іншому випадку текст вирівнюється по стартовій точці.
Примітки
У специфікації говориться, що для роботи властивості text-align-last спершу необхідно задати властивість text-align значення justify. Тим не менш, судячи з усього це правило працює тільки в IE і Edge. У Chrome і Firefox властивість працює і без text-align: justify. У демо нижче весь текст повинен вирівнюватися по правому краю Edge і IE. В інших браузерах останній рядок буде вирівнюватися залежно від значення властивості text-align-last, всі інші рядки будуть вирівнюватися по правому краю.
Результат може здатися не таким привабливим, як з просто властивістю text-align: justify. У більшості випадків ви будете просто вирівнювати текст по ширині.
Властивість працює навіть при розриві рядка за допомогою тега br або чогось ще. Також варто пам’ятати, що властивість вирівнює останній рядок в межах заданого блоку, а не останній рядок контенту. Приміром, якщо текст всередині article або div поділено на три параграфи, то в кожному параграфі останній рядок буде вирівнюватися за допомогою властивості text-align-last.
Якщо ж знадобилося вирівняти саме останній рядок всього контенту, то в залежності від ситуації можна скористатися селекторами :last-child або :last-of-type. Візьмемо код нижче в якості прикладу:
article {
text-align: justify;
}
article p:last-of-type {
text-align-last: right;
}
Код вирівнює останній рядок останнього абзацу по правому краю. Всі інші рядки вирівнюються по властивості text-align.
Схожим чином можна використовувати селектори even і odd і змінювати вирівнювання поперемінно. Іноді буде виходити так, що в параграфі буде всього один рядок, яка буде одночасно і першою й останньою. Якщо в такому абзаці задані обидва властивості text-align та text-align-last, то останнім буде мати перевагу.
Винятком є випадок, коли через text-align явно вказано вирівнювання першого рядка first-line зі значеннями ‘start end’. Розглянемо нижче код:
p {
text-align: justify;
}
p:nth-of-type(2) {
text-align-last: left;
}
Якщо у другому параграфі, як у нашому випадку, буде всього один рядок, то текст в ньому буде вирівняно по лівому краю, а не по ширині, так як властивість text-align-last буде мати перевагу. У демо нижче показана робота CSS коду зверху і ще два приклади.
Підтримка в браузерах
Ми обговорили всі важливі моменти властивості text-align-last, тепер давайте поговоримо про підтримку. Активувати цю властивість можна за допомогою прапора «Enable Experimental Web Platform Features» в браузерах Chrome і Opera, починаючи з версій 35 і 22 і далі відповідно. У Chrome і Opera повна підтримка починається з версій 47 і 34+.
У Firefox дане властивість працює з префіксом –moz-. В IE не підтримуються значення start і end. Тим не менш, Edge властивість підтримується повністю. Відзначився тільки браузера Safari, який взагалі не підтримує text-align-last. Більш детально про підтримку можна прочитати за посиланням.
Загальна підтримка властивості складає 61.85%, що не має відлякати вас від думки використати його. Користувачі, чиї браузери не мають підтримки властивості, просто не помітять різниці.
Висновок
Властивість text-align-last можна використовувати для вирівнювання тексту в статті, проте є ще один цікавий приклад використання – вирівнювання довгих підписів до зображень, коли текст не вміщується на одному рядку. Якщо ви знаєте про інші способи застосування даної властивості, або у вас виникли питання, пишіть про це в коментарях.
