Форматування тексту

Форматування тексту — засоби його зміни, такі як вибір шрифту та використання ефектів, що дозволяють змінювати вигляд тексту. У табл.

Текст

Будь-які теги форматування тексту можна використовувати спільно з одним. Щоб зробити текст одночасно жирним і курсивним шрифтом, використовується поєднання тегів і (приклад 1).

1. Жирний курсивний текст

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

Результат цього прикладу показано на рис.

1. Вид курсивного жирного зображення тексту

Використання тегів та зсуває текст щодо базової лінії та зменшує розмір шрифту (приклад 2).

Приклад 2. Створення нижнього індексу

Формула смарагду:
Be3Al2(SiO3)6

Результат цього прикладу показано на рис.

2. Нижній індекс у тексті

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

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

Текст та типографіка¶

При створенні сайту не обов'язково надавати тексту стиль: в HTML за замовчуванням закладено цілком прийнятні стилі.

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

У цьому модулі ми спочатку розглянемо деякі фундаментальні властивості шрифтів CSS, такі як font-family, font-style, font-weight та font-size. Потім ми розглянемо властивості, які впливають абзаци тексту, такі як text-indent і word-spacing . На завершення модуля ми розглянемо деякі складніші теми, такі як змінні шрифти та псевдоелементи.

Зміна шрифту¶

Використовуйте властивість font-family для зміни шрифту в тексті.

Властивість font-family приймає список рядків, розділених комами, що належать або до конкретним, або до загальним сімейства шрифтів. Конкретні сімейства шрифтів - це рядки, укладені в лапки, такі як "Helvetica", "EB Garamond" або "Times New Roman". Спільними сімействами шрифтів є ключові слова serif, sans-serif та monospace (повний список варіантів). Браузер відобразить перший доступний шрифт із представленого списку.

Коли браузер вибирає шрифт для відображення на основі оголошення font-family, він не зупиняється на першому доступному шрифті у списку. Натомість він вибирає шрифти по одному символу. Якщо певний символ не доступний у першому шрифті списку, він переходить до наступного, і таке інше.

При використанні font-family необхідно вказати хоча б одне спільне сімейство шрифтів на той випадок, якщо в браузері користувача не встановлені шрифти. Як правило, резервне сімейство шрифтів має бути аналогічно відданим шрифтам: якщо використовується font-family: "Helvetica" (сімейство шрифтів sans-serif), запасним має бути sans-serif, щоб відповідати.

Використання курсивних та похилих шрифтів¶

За допомогою font-style можна встановити, чи текст повинен бути курсивним чи ні. font-style приймає одне з таких ключових слів: normal, italic і oblique.

У чому різниця між italic і oblique?

У шрифтах, які їх підтримують, font-style: italic зазвичай є курсивною версією звичайного шрифту. А font-style:oblique відображає похилу версію звичайного шрифту.

Зробити текст жирним¶

Для встановлення жирності тексту використовуйте властивість font-weight . Ця властивість приймає значення ключових слів (normal, bold), відносні значення ключових слів (lighter, bolder) та числові значення (від 100 до 900).

Ключові слова normal і bold еквівалентні числовим значенням 400 та 700 відповідно.

Ключові слова lighter та bolder обчислюються щодо батьківського елемента. Зручну схему, що показує, як це значення, див. у MDN Meaning of Relative Weights.

Більшість шрифтів, особливо "web-safe", підтримують лише ваги 400 (normal) та 700 (bold).При імпорті шрифтів за допомогою @font-face або @import можна вибрати конкретні ваги, які потрібно підтягнути. Однак неперемінні шрифти підтримують числові значення font-weight тільки сотих частках, наприклад, 100 , 200 , 300 і т.д. Якщо ви хочете використовувати font-weight: 321 (наприклад), вам доведеться використовувати Змінний шрифт.

Зміна розміру тексту¶

Для керування розміром текстових елементів використовуйте властивість font-size. Ця властивість набуває значень довжини, відсотків і кілька значень ключових слів.

Крім значень довжини та відсотків, font-size приймає деякі абсолютні значення ключових слів (xx-small, x-small, small, medium, large, x-large, xx-large) і декілька відносних значень ключових слів (smaller, larger). Відносні значення відносяться до розміру font-size батьківського елемента.

У чому різниця між em і rem?

CSS em являє собою розмір шрифту , успадкований від батьківського елемента. Наприклад, font-size: 2em еквівалентний font-size батьківського елемента, помноженого на два. rem аналогічно, але натомість представляє розмір шрифту , успадкований від кореневого елемента, тобто. .

Зміна відстані між рядками¶

Використовуйте властивість line-height для вказівки висоти кожного рядка елемента. Ця властивість може набувати значень: число, довжина, відсоток або ключове слово normal . Зазвичай рекомендується використовувати число, а не довжину чи відсоток, щоб уникнути проблем із успадкуванням.

Зміна відстані між символами¶

Використовуйте властивість letter-spacing для керування розміром горизонтальної пробілу між символами в тексті. Ця властивість приймає такі значення довжини, як em, px і rem.

Зверніть увагу, що вказане значення збільшує природний простір між символами. У демонстраційному прикладі нижче спробуйте виділити окрему літеру, щоб побачити розмір її поля та те, як він змінюється при зміні letter-spacing.

Зміна пробілу між словами¶

Використовуйте властивість word-spacing для збільшення або зменшення довжини пробілу між кожним словом у тексті. Ця властивість приймає такі значення довжини, як em, px і rem. Зверніть увагу, що вказана довжина відноситься до додатковому пробілу на додаток до звичайного інтервалу. Це означає, що word-spacing: 0 еквівалентно word-spacing: normal .

Скорочена властивість font¶

За допомогою властивості font можна встановити відразу кілька властивостей, пов'язаних зі шрифтом. До списку можливих властивостей входять font-family, font-size, font-stretch, font-style, font-variant, font-weight та line-height.

Про те, як упорядкувати ці властивості, читайте у font .

Зміна регістру тексту¶

Використовуйте властивість text-transform для зміни великої літери тексту без зміни основного HTML. Ця властивість набуває наступних значень ключових слів: uppercase , lowercase і capitalize .

Додавання підкреслень, надрядкових та наскрізних ліній у текст¶

Використовуйте text-decoration для додавання ліній до тексту. Найчастіше використовуються підкреслення, але можна додавати лінії над текстом або прямо через нього!

Властивість text-decoration є скороченням більш специфічних властивостей, описаних нижче.

Властивість text-decoration-line приймає ключові слова underline, overline та line-through. Можна також вказати кілька ключових слів для кількох рядків.

Властивість text-decoration-color задає колір усіх прикрас із text-decoration-line .

Властивість text-decoration-style приймає ключові слова solid, double, dotted, dashed та wavy.

Властивість text-decoration-thickness приймає будь-які значення довжини та встановлює ширину обведення всіх декоративних елементів із text-decoration-line .

Властивість text-decoration є скороченням для всіх перерахованих вище властивостей.

Використовуйте text-underline-position для усунення підкреслення text-decoration: underline на вказану величину. Ця властивість не працює для overline або line-through.

Додавання відступу до тексту¶

Щоб додати відступ до текстових блоків, використовуйте властивість text-indent . Ця властивість приймає або довжину (наприклад, 10px , 2em ), або відсоток від ширини блоку, що міститься.

Робота з переповненим або прихованим вмістом¶

Використовуйте text-overflow для вказівки способу подання прихованого вмісту. Є два варіанти: clip (за замовчуванням), який обрізає текст у місці переповнення, і ellipsis , який відображає крапку ( … ) у місці переповнення.

Управління пробілами¶

Властивість white-space використовується для вказівки того, як слід обробляти символи пробілів в елементі.

white-space: pre може бути корисним для відображення ASCII art або ретельно вирізаних блоків коду.

Управління розбиттям слів¶

Використовуйте word-break , щоб змінити спосіб "розбиття" слів, коли вони виходять за межі рядка. За промовчанням браузер не розбиває слова. Використання значення ключового слова break-all для word-break дозволить браузеру за необхідності розбивати слова окремі символи.

Зміна вирівнювання тексту¶

Для завдання горизонтального вирівнювання тексту в блоці або таблично-комірковому елементі використовуйте властивість text-align . Ця властивість приймає значення ключових слів left, right, start, end, center, justify та match-parent.

Значення left і right вирівнюють текст з лівої та правої сторін блоку відповідно.

Значення start та end використовуються для позначення початку та кінця рядка тексту у поточному режимі запису. Таким чином, start відповідає left в англійській мові та right в арабській графіці, що пишеться праворуч наліво (RTL). Це логічні вирівнювання, докладніше про це можна дізнатися у модулі logical properties.

Використовуйте центр для вирівнювання тексту по центру блоку.

Значення justify упорядковує текст і автоматично змінює інтервали між словами таким чином, щоб текст вирівнювався як по лівому, так і правому краю блоку.

Зміна напряму тексту¶

Використовуйте direction , щоб встановити напрямок тексту: ltr (зліва направо, за замовчуванням) або rtl (справа наліво). Деякі мови, такі як арабська, іврит або перська, пишуться праворуч наліво, тому слід використовувати direction: rtl . Для англійської та всіх інших мов, що пишуть ліворуч, слід використовувати direction: ltr .

Загалом замість direction слід використовувати HTML-атрибут dir . Докладнішу інформацію можна знайти в цьому обговоренні на StackOverflow.

Зміна обтікання тексту¶

Використовуйте writing-mode для зміни способу обтікання та розташування тексту. За замовчуванням використовується horizontal-tb , але можна також встановити writing-mode в vertical-lr або vertical-rl для тексту, який повинен бути горизонтально.

Зміна орієнтації тексту

Використовуйте властивість текст-орієнтації для вказівки орієнтації символів у тексті. Допустимими значеннями для цієї властивості є mixed і upright. Ця властивість є актуальною тільки в тому випадку, якщо для параметра writing-mode встановлено значення, відмінне від horizontal-tb .

Додавання тіні до тексту¶

Для додавання тіні до тексту використовуйте властивість text-shadow. Ця властивість очікує три довжини (x-offset, y-offset і blur-radius) і колір.

Змінні шрифти¶

Як правило, "звичайні" шрифти вимагають імпорту різних файлів для різних версій шрифту, наприклад жирного, курсивного або конденсованого. Змінні шрифти — це шрифти, які можуть містити багато різних варіантів шрифту в одному файлі.

Roboto Flex у довільних поєднаннях ширини та ваги

Більш детальну інформацію можна знайти в нашій статті про змінні шрифти.

Псевдоелементи¶

Псевдоелемент — це частина елемента, на яку можна націлитись за допомогою ключових слів CSS без необхідності додавати додатковий HTML. Ознайомтеся з нашим модулем із псевдоелементів для більш глибокого вивчення цієї теми!

Псевдоелементи :: first-letter та :: first-line ¶

Псевдоелементи :: first-letter та :: first-line націлені на першу літеру та перший рядок текстового елемента відповідно.

Псевдоелемент ::selection ¶

Для зміни вигляду вибраного користувачем тексту використовуйте псевдоелемент ::selection .

При використанні цього псевдоелемента можна застосовувати лише певні CSS-властивості: color, background-color, text-decoration, text-shadow, stroke-color, fill-color, stroke-width.

font-variant ¶

Властивість font-variant — це скорочення ряду CSS-властивостей, що дозволяють вибирати такі варіанти шрифтів, як small-caps і slashed-zero . До таких CSS-властивостей відносяться font-variant-alternates, font-variant-caps, font-variant-east-asian, font-variant-ligatures і font-variant-numeric. Детальнішу інформацію про використання кожної властивості можна знайти за посиланнями.

Ресурси¶

• Найкращі методи роботи зі шрифтами, де розглядаються питання імпорту шрифтів, рендерингу шрифтів та інші найкращі методи використання шрифтів в Інтернеті.
• MDN Основи стилізації тексту та шрифтів.