Міжсимвольний, міжрядковий інтервал CSS. Відстань між словами. Ілюстрування

Вирівнювання по заданій відстані

Розглянемо вертикальне вирівнювання на задану відстань. Властивість vertical align дуже проста: воно переміщає елемент вгору чи вниз на вказану відстань. Таким чином, вираз verti cal align: 5px; зрушить елемент на п'ять пікселів відносно вихідного положення. Негативні значення довжини зрушують елемент вниз. Цієї простої форми вирівнювання не було CSS1, але вона додана в CSS2.

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

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

Мал. 6.18. Вертикальне вирівнювання може призвести до збільшення висоти рядків

Відстань між літерами та словами

Покінчивши з вирівнюванням, звернімося до керування відстанями між словами та літерами. Ці властивості теж мають свою специфіку.

Відстань між словами

Властивість word spacing допускає позитивні чи негативні значення довжини. Це значення додається до стандартної відстані між словами. По суті, слово spacing служить для зміни відстані між словами. Тому значення norm, що застосовується за умовчанням, аналогічно нульовому значенню (0).

Якщо задати позитивне значення довжини, відстань між словами збільшиться. А якщо задати негативне значення для word spac ing, то слова зрушать ближче одне до одного:

174 Розділ 6. Властивості тексту

p.spread (word spacing: 0.5em;) p.tight (word spacing: 0.5em;) p.base (word spacing: normal;) p.norm (word spacing: 0;)

Spaces між словами в цьому параграфі буде збільшуватися до 0.5em.

Spaces між словами в цьому параграфі буде розпізнано за 0.5em.

Spaces між словами в цьому параграфі буде необхідним.

Ефект, який надаються цими налаштуваннями, показаний на рис. 6.19.

Мал. 6.19. Зміна відстані між словами

Досі я не дав точного визначення терміну слово. У термінології CSS «слово» – це будь-який рядок, що не містить символів роздільників і обмежений такими символами з обох сторін. Це визначення не відноситься до семантики, воно просто передбачає, що документ містить слова, оточені одним або декількома символами роздільниками. Не можна очікувати від підтримуючого CSS агента користувача, що він зможе у всіх випадках відрізнити слово від слова в даній мові. Це визначення, хоч би яким воно було, означає, що word spacing навряд чи буде працювати в мовах, заснованих на пік тографії або на нероманських стилях написання. Ця властивість дозволяє створювати абсолютно нечитані документи, що ясно видно на рис. 6.20. Слід обережно застосовувати word spacing.

Мал. 6.20. Дійсно великі відстані між словами

Відстань між літерами

Багато проблем, що зустрічаються під час роботи з word spacing, мають місце у разі застосування letter spacing. Єдина відмінність між ними полягає в тому, що властивість letter spacing змінює відстані між символами або літерами.

Як і властивості word spacing, допустимим значенням letter spacing є будь-яка довжина. За промовчанням вказується ключове слово normal (що аналогічно до letter spacing: 0). Будь-яке значення довжини буде збільшувати або зменшувати відстань між літерами на цю величину. На рис. 6.21 показані результати застосування наступної розмітки:

p (letter spacing: 0;) /* ідентично "normal" */

p.spacious (letter spacing: 0.25em;) p.tight (letter spacing: 0.25em;)

The letters in this paragraph є spaced as normal.

Letters in this paragraph є висхідний від bit.

The letters in this paragraph are bit smashed together.

Мал. 6.21. Різні відстані між літерами

Мал. 6.22. Застосування властивості letter%spacing для збільшення виразності виділеного тексту

Застосування letter spacing підвищення виразності виділення – це методика, освячена часом. Можна було б написати наступне оголошення та отримати ефект, показаний на рис. 6.22:

strong (letter spacing: 0.2em;)

Цей пункт містить strongly emphasized textщо це витрачено для extra emphasis.

Відстань між словами та літерами та вирівнювання

На значення word spacing може впливати значення якості text align. Якщо елемент вирівняний по ширині, пробіли між літерами та словами коригуються так, щоб текст займав весь рядок. Це може у свою чергу змінити параметри, що визначають відстань між словами та літерами, оголошені автором у властивостях word spacing. Якщо встановлено значення letter spacing, воно не може бути змінено text align, але якщо letter spacing має значення normal, відстань між символами може змінюватися для забезпечення вирівнювання тексту по ширині. CSS не вказує, як повинні обчислюватися прогалини, тому агент користувача просто створює їх.

Дочірній елемент, як завжди, успадковує обчислене значення свого батька. Не можна зробити так, щоб замість обчисленого значення властивостей word spacing або letter spacing успадковувався коефіцієнт масштабування (як це відбувається у випадку з line height). У результаті можна зіткнутися з проблемою, показаною на рис. 6.23:

p (letter spacing: 0.25em; font size: 20px;) small (font size: 50%;)

Цей особливий параграф нюансів tiny text that is just as spacious, Тільки після того, як author probably wanted the spacing to be в proportion to the size of the text.

Мал. 6.23. Спадкована прогалина між літерами

  • Книга XVI та XVII ст.
  • Книжка XVIII ст.
  • Книга у Росії XVI-XVIII ст.
  • Книга ХІХ і ХХ ст.
    • Книга ХІХ і ХХ ст. - Сторінка 2
    • Книга ХІХ і ХХ ст. - Сторінка 3
  • Радянська книга
  • КОМПОЗИЦІЯ
    • Композиція
    • Основні лінійні схеми композиції та їх зоровий вплив
      • Основні лінійні схеми композиції та їх зоровий вплив - Сторінка 2
    • Тональна композиція
    • Фізіологічні чинники у графічній композиції
    • Золотий перетин
      • Золотий перетин - сторінка 2
    • Формат смуги та її встановлення на сторінці
      • Формат смуги та її встановлення на сторінці - сторінка 2
      • Формат смуги та її встановлення на сторінці - сторінка 3
    • Композиція всередині смуги
      • Графічні конструкції тексту
      • Акцентування тексту
      • Початкова та кінцева смуги
    • Титульні елементи
      • Образотворна обкладинка
      • Набірна шрифтова обкладинка
      • Комбінована обкладинка
      • Суперобкладинка
      • Титульна сторінка
      • Шмуцтитул
      • Палітурка
      • Форзац
    • Верстка з ілюстраціями
      • Різні типи верстки
      • Деякі особливості верстки ілюстрацій
      • Установка малюнків на розвороті
      • Дотримання пропорцій
      • Підписи до малюнків
    • Доцільне використання паперу
  • КОЛІР
    • Колір як фізичне явище
      • Кольори спектру
      • Колір тіл
      • Характеристика кольору
      • Змішання квітів
    • Колір у мистецтві та промисловості
      • Послідовний контраст
      • Одночасний контраст
    • Колірні гармонії
      • Естетика ізольованого кольору
      • Колірні гармонії по колу Оствальда
      • Рівноступне коло
      • Однотонні гармонії
      • Умовність колірних гармоній
    • Колір в оформленні книги
      • Декоративне оформлення
      • Просторове відношення кольорів
      • Фігура та фон
      • Фон та контур
      • Зміна кольору при штучному освітленні
    • Друковані фарби
      • Кроюча здатність фарби
      • Світломіцність фарби
      • Інші властивості фарб
      • Двотонові фарби
    • Кольорові оригінали
      • Штрихові оригінали
      • Тонові оригінали
      • Оригінали для глибокого друку
      • Оригінали для літографського друку
      • Оригінали для офсетного друку
    • Комбінований багатобарвний друк
    • Якість кольорової репродукції
  • ШРИФТ
    • Розвиток шрифту
      • Рукописні шрифти
      • Друкарські шрифти до ХІХ ст.
      • Розвиток шрифтів у XIX та XX ст.
      • Розвиток російського друкарського шрифту
    • Конструкція шрифту
      • Антиква та гротеск
      • Характеристика шрифтів
      • Ширина шрифту
      • Шрифт як конструктивне ціле
    • Малювання шрифтів
      • Малювання шрифтів - Сторінка 2
      • Відстань між літерами
      • Про ширину букв
      • Рукописні шрифти
    • Зв'язок шрифту з ілюстрацією
  • ІЛЮСТРАЦІЙНИЙ МАТЕРІАЛ
    • Основні засади ілюстрування
    • Оригінальний малюнок
    • Штриховий та тоновий малюнок
    • Специфічні вимоги до оформлення підручників та дитячих книг
    • Репродукування одноколірних оригіналів способом високого друку
    • Репродукування одноколірних оригіналів засобами плоского та глибокого друку
    • Технічний малюнок
    • Перемальовка

    • Відстань між літерами

    Дотримання між літерами потрібної відстані дуже важливе. Часто можна бачити, з одного боку, надто тісно поставлені один до одного букви, а з іншого, - величезні, нічим не виправдані інтервали між ними.

    У слові «КОЛИ» літери КОГ візуально сприймаються, як зрушені, тоді як між Р і Д-розрив, підкреслений ще зближенням букв Д і Л.

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

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

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

    У латинському алфавіті таких літер лише дві - J, Z. Це створює у російському тексті ряд графічно важких буквосполучень при сусідстві літери, «відкритої» праворуч і «відкритої» ліворуч, наприклад ГЛ.

    Вирівнювання відстаней між літерами доводиться проводити й у друкарських шрифтах (від кг. 16 і від). Друкарські шрифти відливаються, за малими винятками, без урахування міжлітерних відстаней.

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

    Тому при малюванні шрифту потрібна ретельна попередня розмітка інтервалів, що враховує характер суміжних букв.

    Однак було б абсолютно неправильно, компонуючи шрифтовий рядок, розпочати роботу з цифрового розрахунку інтервалів. Необхідно насамперед побудувати її на око, вирішити так, як це підказується безпосереднім чуттям художника. І тільки потім математично уточнювати розміри інтервалів (половина, чверть і т. д.).

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

    Визначає інтервал між символами у межах елемента. Браузери зазвичай встановлюють відстань між символами, виходячи з типу та виду шрифту, його розмірів та налаштувань операційної системи. Щоб змінити це значення і застосовується ця властивість. Допустимо використовувати негативне значення, але в цьому випадку треба переконатися, що зберігається читабельність тексту.

    коротка інформація

    Позначення

    Описприклад
    <тип> Вказує тип значення.<размер>
    A && BЗначення мають виводитися у вказаному порядку.<размер> && <цвет>
    A | BВказує, що треба вибрати лише одне значення із запропонованих (A або B).normal | small-caps
    A || BКожне значення може використовуватись самостійно або спільно з іншими у довільному порядку.width || count
    Групує значення.[crop || cross]
    * Повторювати нуль або більше разів.[,<время>]*
    + Повторювати один чи більше разів.<число>+
    ? Зазначений тип, слово чи група не є обов'язковим.inset?
    (A, B)Повторювати щонайменше A, але з більше разів.<радиус>{1,4}
    # Повторювати один або більше разів через кому.<время>#
    ×

    Значення

    Як значення приймаються будь-які одиниці довжини, прийняті CSS — наприклад, пікселі (px), дюйми (in), пункти (pt) та інших. Найкращий результат дає використання відносних одиниць, заснованих на розмірі шрифту (em і ex).

    Normal Задає інтервал між символами як завжди.

    Пісочниця

    Вінні-Пух був завжди не проти трохи підкріпитися, особливо годин об одинадцятій ранку, тому що в цей час сніданок вже давно скінчився, а обід ще й не думав починатися. І, звичайно, він страшенно зрадів, побачивши, що Кролик дістає чашки та тарілки.

    div ( letter-spacing: 0 ; )

    приклад

    letter-spacing

    Кульмінація, після обережного аналізу, суттєво перекреслює екваторіальне велике коло небесної сфери, як це сталося у 1994 році з кометою Шумейкерів-Леві 9.



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

    Мал. 1. Застосування якості letter-spacing

    Об'єктна модель

    Об'єкт.style.letterSpacing

    Специфікація

    Кожна специфікація проходить кілька стадій схвалення.

    • Recommendation (Рекомендація) - специфікація схвалена W3C та рекомендована як стандарт.
    • Candidate Recommendation ( Можлива рекомендація) - група, відповідальна за стандарт, задоволена, як він відповідає своїм цілям, але потрібна допомога спільноти розробників з реалізації стандарту.
    • Proposed Recommendation ( Пропонована рекомендація) - на цьому етапі документ подано на розгляд Консультативної ради W3C для остаточного затвердження.
    • Working Draft (Робочий проект) - більш зріла версія чернетки після обговорення та внесення поправок для розгляду спільнотою.
    • Editor"s draft ( Редакторська чернетка) - Чорнова версія стандарту після внесення правок редакторами проекту.
    • Draft ( Чернетка специфікації) – перша чорнова версія стандарту.
    ×

    Інтерліньяж– це вертикальний інтервал між рядками текст . Він вимірюється від базової лінії одного рядка тексту до базової лінії рядка над нею. Базова лінія– це невидима лінія, де знаходиться нижній край більшості букв.

    Значення за промовчанням для автоінтерліньяжу дорівнює 120% від гарнітури шрифту (наприклад, для шрифту в 10 пунктів інтерліньяж дорівнює 12 пунктам). Коли використовується автоінтерліньяж, значення інтерліньяжу відображається в дужках у меню «Інтерліньяж» панелі «Символ». Щоб змінити значення автоінтерліньяжу за промовчанням, виберіть у меню панелі «Абзац» пункт «Вирівнювання» та встановіть відсоток від 0 до 500.

    За промовчанням інтерліньяж є символьним атрибутом, тобто в одному абзаці можна застосувати декілька значень інтерліньяжу. Інтерліньяж рядка визначається за найбільшим його значенням у цьому рядку.

    Примітка.

    При роботі з горизонтальним азіатським текстом можна вказати, як слід вимірювати інтерліньяж: або між базовими лініями двох рядків, або від верху одного рядка до наступного.

    Зміщення базової лінії

    Для зміщення виділених символів вгору або вниз щодо базової лінії навколишнього тексту використовується параметр «Зміщення базової лінії». Зміщення базової лінії особливо корисне при ручному налаштуванні фрагментів або налаштуванні положення шрифту з піктограмами.

    Налаштування кернінгу та трекінгу

    Кернінг- це збільшення або зменшення інтервалу між певними парами символів. Трекінг- це збільшення або зменшення інтервалу між символами у виділеному тексті або у всьому блоці тексту.

    Примітка.

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

    Кернінг тексту можна виконувати автоматично, використовуючи функції метричного або оптичного кернінгу. При метричний кернінг(називається також автокернінгом) використовуються пари літер, які включені до більшості шрифтів. Шрифти містять відомості, що застосовуються в процесі кернінгу, про інтервал між літерами в конкретних парах. Ось деякі з цих пар: "LA", "P.", "To", "Tr", "Ta", "Tu", "Te", "Ty", "Wa", "WA", "We" , "Wo", "Ya" та "Yo". Метричний кернінг застосовується за замовчуванням, тому до конкретних пар літер кернінг застосовується автоматично під час імпорту або введення.

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


    A.Початковий текст B.Текст після застосування оптичного кернінгу C.Текст після встановлення вручну значення кернінгу між літерами «W» та «a» D.Текст після застосування трекінгу E.Поєднання кернінгу та трекінгу

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

    Якщо, клацнувши мишею, помістити точку введення між двома літерами, на панелі «Символ» відображаються значення кернінгу. Значення метричного та оптичного кернінгу (або певної кернінгової пари) відображаються у дужках. Так само значення трекінгу з'являються на панелі «Символ» при виділенні слова або фрагмента тексту.

    Трекінг та кернінг вимірюються в 1/1000 ем. Ця одиниця виміру дорівнює ширині найширшої літери шрифту і дозволяє задати розмір щодо поточної гарнітури. Для шрифту розміром 6 пунктів 1 ем дорівнює 6 пунктів. Для шрифту розміром 10 пунктів 1 ем дорівнює 10 пунктів. Кернінг та трекінг суворо пропорційні поточному розміру гарнітури шрифту.

    Примітка.

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

    Налаштування кернінгу

      Виконайте будь-яку з наступних дій:

      • Щоб використати відомості про кернінг, вбудовані в шрифт, для виділених символів виберіть параметр «Кернінг» на панелі «Символ» для «Автоматичний» або «Метричний».

        Щоб автоматично налаштувати інтервал між виділеними символами з урахуванням їхньої форми, виберіть параметр «Кернінг» на панелі «Символ» значення «Оптичний».

        Щоб настроїти кернінг вручну, помістіть точку введення між двома символами та встановіть потрібне значення на панелі «Символ». (Примітка. Якщо виділено фрагмент тексту, зробити кернінг тексту вручну неможливо. Натомість скористайтеся автоматичним трекінгом.)

        Порада. Щоб зменшити або збільшити кернінг між двома символами, використовуйте комбінацію клавіш Alt+Стрілка ліворуч/праворуч (Windows) або Option+Стрілка ліворуч/праворуч (Mac OS).

        Щоб вимкнути кернінг для виділених символів, встановіть параметр «Кернінг» на панелі «Символ» значення «0» (нуль).

        Додатково. Щоб ознайомитися зі списком клавіш, які використовуються під час роботи з текстом, наберіть у рядку пошуку довідки «поєднання клавіш».

    Обробка прогалин між літерами та словами

    1. Відстань між словами word-spacing

    Встановлює проміжки між словами. Можна використовувати позитивні та негативні значення. При негативному значенні слова можуть накладатися одне одного.

    На значення word-spacing впливає значення властивості text-align у разі вирівнювання тексту по ширині. Успадковується.

    Синтаксис

    P (word-spacing: normal;) p (word-spacing: 2px;)
    Мал. 1. Відстань між словами

    2. Відстань між літерами letter-spacing

    Властивість встановлює відстань між літерами (величину трекінгу) та символами. Може приймати позитивні та негативні значення. Доцільно застосовувати для підвищення виразності та читання заголовків, визначень та ін.

    Синтаксис

    P (letter-spacing: normal;) p (letter-spacing: 2px;)
    Мал. 2. Зміна відстані між літерами за допомогою властивості letter-spacing

    3. Обробка пробілів white-space

    Властивість обробляє пробіли між словами та перенесення рядків усередині елемента. Чи не успадковується.

    white-space
    Значення:
    normal Значення за замовчуванням. Між словами вставляється лише по одному пропуску, додаткові пропуски відкидаються. Текст переноситься лише у разі потреби.
    nowrap Забороняє перенесення рядків, крім застосування
    .
    pre Пробіли в тексті не ігноруються, браузер відображає додаткові пробіли та перенесення рядків.
    pre-wrap Зберігає прогалини в тексті, роблячи розриви рядків там, де це потрібно.
    pre-line Видаляє зайві прогалини, за винятком випадків
    .
    initial Встановлює значення властивості значення за замовчуванням.
    inherit Наслідує значення властивості від батьківського елемента.

    Синтаксис

    P (white-space: normal;) p (white-space: nowrap;) p (white-space: pre;) p (white-space: pre-wrap;) p (white-space: pre-line;)

    4. Налаштування табуляції tab-size

    Для зміни величини відступу, який отримується за допомогою клавіші ТAB, використовується властивість tab-size . Значення властивості ігноруються, коли встановлено одне з трьох значень pre-line, normal або nowrap властивості white-space.

    Працює лише для елементів