canvas | Стили текста

canvas | Стили текста

Для веб-разработчиков (не нормативно)

context.font [ = value ]

styles.font [ = value ]

Возвращает текущие настройки шрифта.

Можно установить, чтобы изменить шрифт. Синтаксис такой же, как и для свойства CSS ‘font‘; значения, которые не могут быть проанализированы как значения шрифта CSS, игнорируются.

Относительные ключевые слова и длины вычисляются относительно шрифта элемента холста canvas.

context.textAlign [ = value ]

styles.textAlign [ = value ]

Возвращает текущие настройки выравнивания текста.

Можно установить, чтобы изменить выравнивание. Возможные значения и их значения приведены ниже. Другие значения игнорируются. По умолчанию «start» (старт).

 

context.textBaseline [ = value ]

styles.textBaseline [ = value ]

Возвращает текущие настройки выравнивания базовой линии.

Можно установить, чтобы изменить базовое выравнивание. Возможные значения и их значения приведены ниже. Другие значения игнорируются. По умолчанию используется «alphabetic» (алфавитный).

context.direction [ = value ]

styles.direction [ = value ]

Возвращает текущую направленность.

Можно установить, чтобы изменить направление. Возможные значения и их значения приведены ниже. Другие значения игнорируются. По умолчанию «inherit» (наследовать).

context.letterSpacing [ = value ]

styles.letterSpacing [ = value ]

Возвращает текущий интервал между символами в тексте.

Можно установить, чтобы изменить интервал между символами. Положительные значения раздвигают символы дальше друг от друга, а отрицательные значения сближают их. Значение по умолчанию – 0.

context.fontKerning [ = value ]

styles.fontKerning [ = value ]

Возвращает текущие настройки кернинга шрифта.

Можно установить, чтобы изменить кернинг шрифта. Возможные значения и их значения приведены ниже. Другие значения игнорируются. По умолчанию «auto» (авто).

 

context.fontStretch [ = value ]

styles.fontStretch [ = value ]

Возвращает текущие настройки растяжения шрифта.

Можно установить, чтобы изменить растяжку шрифта. Возможные значения и их значения приведены ниже. Другие значения игнорируются. По умолчанию «normal» (нормально).

context.fontVariantCaps [ = value ]

styles.fontVariantCaps [ = value ]

Возвращает текущие настройки заглавных букв вариантов шрифта.

Можно установить, чтобы изменить вариант шрифта заглавными буквами. Возможные значения и их значения приведены ниже. Другие значения игнорируются. По умолчанию «normal» (нормально).

context.textRendering [ = value ]

styles.textRendering [ = value ]

Возвращает текущие настройки рендеринга текста.

Можно установить, чтобы изменить рендеринг текста. Возможные значения и их значения приведены ниже. Другие значения игнорируются. По умолчанию «auto» (авто).

context.wordSpacing [ = value ]

styles.wordSpacing [ = value ]

Возвращает текущий интервал между словами в тексте.

Можно установить, чтобы изменить интервал между словами. Положительные значения раздвигают слова дальше друг от друга, а отрицательные значения сближают их. Значение по умолчанию – 0.

 

Объекты, реализующие интерфейс CanvasTextDrawingStyles, имеют атрибуты (определенные в этом разделе), которые управляют размещением текста (растровым или контурным) объектом. Такие объекты также могут иметь исходный объект стиля шрифта (font style source object). Для объектов CanvasRenderingContext2D это элемент холста canvas, заданный значением атрибута canvas контекста. Для объектов OffscreenCanvasRenderingContext2D это связанный объект OffscreenCanvas.

Разрешение шрифта для исходного объекта стиля шрифта требует источника шрифта. Это определяется для данного объекта object, реализующего CanvasTextDrawingStyles, с помощью следующих шагов: [CSSFONTLOAD]

1. Если исходный объект стиля шрифта объекта object является элементом холста canvas, вернуть документ узла элемента.
2. В противном случае исходный объект стиля шрифта объекта object является объектом OffscreenCanvas:
   2.1. Пусть global будет соответствующим глобальным объектом объекта object.
   2.2. Если global является объектом Window, верните связанный с ним Document .
   2.3. Утверждено: global реализует WorkerGlobalScope.
   2.4. Вернуть global.
Пример

Это пример разрешения шрифта с обычным элементом холста canvas с идентификатором c1.

const font = new FontFace(«MyCanvasFont», «url(mycanvasfont.ttf)»);

documents.fonts.add(font);

 

const context = document.getElementById(«c1»).getContext(«2d»);

document.fonts.ready.then(function() {

  context.font = «64px MyCanvasFont»;

  context.fillText(«hello», 0, 0);

});

В этом примере на холсте будет отображаться текст с использованием шрифта mycanvasfont.ttf.

 

Пример

Это пример того, как разрешение шрифта может происходить с помощью OffscreenCanvas. Предполагая, что элемент холста canvas с идентификатором c2 передаётся работнику следующим образом:

const offscreenCanvas = document.getElementById(«c2»).transferControlToOffscreen();

worker.postMessage(offscreenCanvas, [offscreenCanvas]);

Затем в рабочем:

self.onmessage = function(ev) {

    const transferredCanvas = ev.data;

    const context = transferredCanvas.getContext(«2d»);

    const font = new FontFace(«MyFont», «url(myfont.ttf)»);

    self.fonts.add(font);

    self.fonts.ready.then(function() {

      context.font = «64px MyFont»;

      context.fillText(«hello», 0, 0);

    });

  };

В этом примере на холсте будет отображаться текст с использованием файла myfont.ttf. Обратите внимание, что шрифт загружается только внутри рабочего процесса, а не в контексте документа.

 

IDL-атрибут font при установке должен быть проанализирован как значение CSS <‘font‘> (но без поддержки независимого от свойства синтаксиса таблицы стилей, такого как ‘inherit‘), а результирующий шрифт должен быть назначен контексту с помощью ‘line-height‘ переведен в ‘normal‘, компонент ‘font-size‘ преобразован в пиксели CSS, а системные шрифты вычислены для явных значений. Если новое значение является синтаксически неправильным (включая использование независимого от свойств синтаксиса таблицы стилей, такого как ‘inherit‘ (наследовать) или ‘inherit‘ (начальный)), его следует игнорировать, не назначая новое значение шрифта. [CSS]

Имена семейств шрифтов должны интерпретироваться в контексте исходного объекта стиля шрифта, когда шрифт должен использоваться; поэтому любые шрифты, встроенные с помощью @font-face или загруженные с использованием объектов FontFace, которые видны исходному объекту стиля шрифта, должны быть доступны после их загрузки. (Каждый исходный объект стиля шрифта имеет источник шрифта, который определяет, какие шрифты доступны.) Если шрифт используется до его полной загрузки или если исходный объект стиля шрифта не имеет этого шрифта в области видимости во время использования шрифта, то его следует рассматривать так, как если бы это был неизвестный шрифт, возвращаясь к другому, как описано в соответствующих спецификациях CSS. [CSSFONTS] [CSSFONTLOAD]

При получении атрибут шрифта font должен возвращать сериализованную форму текущего шрифта контекста (с компонентом не ‘line-height’). [CSSOM]

 

Пример

Например, после следующего утверждения:

context.font = ‘italic 400 12px/2 Unknown Font, sans-serif’;

… выражение context.font будет оцениваться как строка «italic 12px «Unknown Font», sans-serif«. Вес шрифта «400» не отображается, потому что это значение по умолчанию. Высота строки не отображается, потому что она принудительно установлена на «normal» значение по умолчанию.

При создании объекта, реализующего интерфейс CanvasTextDrawingStyles, шрифт контекста должен быть установлен на 10 пикселей без засечек.

Когда для компонента ‘font-size’ (размер шрифта) задана длина с использованием процентов, единиц ’em’ или ‘ex’ или ключевых слов ‘larger‘ (больше) или ‘smaller‘ (меньше), они должны интерпретироваться относительно вычисленного значения ‘font-size’ (размер шрифта) исходного объекта стиля шрифта во время установки атрибута, если это элемент.

Когда для компонента ‘font-weight’ установлены относительные значения ‘bolder‘ (жирнее) и ‘lighter‘ (стройнее), они должны интерпретироваться относительно вычисленного значения свойства ‘font-weight’ исходного объекта стиля шрифта в то время, когда атрибут установлен, если это элемент.

Если вычисленные значения не определены для конкретного случая (например, из-за того, что исходный объект стиля шрифта не является элементом или не визуализируется), тогда относительные ключевые слова должны интерпретироваться относительно стандартного шрифта без засечек размером 10 пикселей по умолчанию.

IDL-атрибут textAlign при получении должен возвращать текущее значение. При настройке текущее значение должно быть изменено на новое значение. Когда создается объект, реализующий интерфейс CanvasTextDrawingStyles, атрибут textAlign изначально должен иметь значение start.

IDL-атрибут textBaseline при получении должен возвращать текущее значение. При настройке текущее значение должно быть изменено на новое значение. При создании объекта, реализующего интерфейс CanvasTextDrawingStyles, атрибуту textBaseline изначально должно быть присвоено значение alphabetic.

IDL-атрибут direction при получении должен возвращать текущее значение. При настройке текущее значение должно быть изменено на новое значение. При создании объекта, реализующего интерфейс CanvasTextDrawingStyles, атрибут direction должен изначально иметь значение «inherit» (наследовать).

IDL-атрибут letterSpacing при получении должен возвращать текущее значение. При настройке текущее значение должно быть изменено на новое значение, где значения могут быть положительными или отрицательными. При создании объекта, реализующего интерфейс CanvasTextDrawingStyles, атрибут letterSpacing изначально должен иметь значение 0.

IDL-атрибут fontKerning при получении должен возвращать текущее значение. При настройке текущее значение должно быть изменено на новое значение. При создании объекта, реализующего интерфейс CanvasTextDrawingStyles, атрибут fontKerning изначально должен иметь значение «auto«.

IDL-атрибут fontStretch при получении должен возвращать текущее значение. При настройке текущее значение должно быть изменено на новое значение. При создании объекта, реализующего интерфейс CanvasTextDrawingStyles, атрибут fontStretch изначально должен иметь значение «normal«.

IDL-атрибут fontVariantCaps при получении должен возвращать текущее значение. При настройке текущее значение должно быть изменено на новое значение. При создании объекта, реализующего интерфейс CanvasTextDrawingStyles, атрибут fontVariantCaps изначально должен иметь значение «normal«.

IDL-атрибут textRendering при получении должен возвращать текущее значение. При настройке текущее значение должно быть изменено на новое значение. При создании объекта, реализующего интерфейс CanvasTextDrawingStyles, атрибут textRendering изначально должен иметь значение «auto«.

IDL-атрибут wordSpacing при получении должен возвращать текущее значение. При настройке текущее значение должно быть изменено на новое значение, где значения могут быть положительными или отрицательными. При создании объекта, реализующего интерфейс CanvasTextDrawingStyles, атрибуту wordSpacing изначально должно быть присвоено значение 0.

 

Допустимые ключевые слова атрибута textAlign:

start

Выравнивание по начальному краю текста (левая сторона при написании текста слева направо, правая сторона при написании справа налево).

end

Выравнивание по краю текста (правая сторона при написании текста слева направо, левая сторона при написании справа налево).

left

Выровнять по левому краю.

right

Выровняйте по правому краю.

center

Выровнять по центру.

 

Разрешённые ключевые слова атрибута textBaseline соответствуют точкам выравнивания в шрифте:

canvas-textBaseline-attribute
canvas-textBaseline-attribute

 

Ключевые слова сопоставляются с этими точками выравнивания следующим образом:

top

Верхняя часть квадрата em

hanging

Висящая базовая линия

middle

Середина квадрата em

alphabetic

Алфавитная базовая линия

ideographic

Идеографическая-нижняя базовая линия

bottom

Нижняя часть квадрата em

 

Допустимые ключевые слова атрибута direction:

ltr

Обрабатывайте входные данные для алгоритма подготовки текста как текст слева направо.

rtl

Обрабатывайте входные данные для алгоритма подготовки текста как текст с написанием справа налево.

inherit

По умолчанию используется направление элемента холста canvas или документа Document в зависимости от ситуации.

 

Допустимые ключевые слова атрибута fontKerning:

auto

Кернинг применяется по усмотрению пользовательского агента.

normal

Применяется кернинг.

none

Кернинг не применяется.

 

Допустимые ключевые слова атрибута fontStretch:

ultra-condensed

То же, что и параметр CSS ‘font-stretch’ ‘ultra-condensed’.

extra-condensed

То же, что и параметр CSS ‘font-stretch’ ‘extra-condensed’.

condensed

То же, что и параметр CSS ‘font-stretch’ ‘condensed’.

semi-condensed

То же, что и параметр CSS ‘font-stretch’ ‘semi-condensed’.

normal

Настройка по умолчанию, при которой ширина глифов равна 100%.

semi-expanded

То же, что и параметр CSS ‘font-stretch’ ‘semi-expanded’.

expanded

То же, что и параметр CSS ‘font-stretch’ ‘expanded’.

extra-expanded

То же, что и параметр CSS ‘font-stretch’ ‘extra-expanded’.

ultra-expanded

То же, что и параметр CSS ‘font-stretch’ ‘ultra-expanded’.

 

Допустимые ключевые слова атрибута fontVariantCaps:

normal

Ни одна из перечисленных ниже функций не включена.

small-caps

То же, что и параметр CSS ‘font-variant-caps’ ‘small-caps’.

all-small-caps

То же, что и параметр CSS  ‘font-variant-caps’ ‘all-small-caps’.

petite-caps

То же, что и параметр CSS ‘font-variant-caps’ ‘petite-caps’.

all-petite-caps

То же, что и параметр CSS ‘font-variant-caps’ ‘all-petite-caps’.

unicase

То же, что и параметр CSS ‘font-variant-caps’ ‘unicase’.

titling-caps

То же, что и параметр CSS ‘font-variant-caps’ ‘titling-caps’.

 

Допустимые ключевые слова атрибута textRendering:

auto

То же, что и ‘auto‘ в свойстве рендеринга текста SVG.

optimizeSpeed

То же, что и  ‘optimizeSpeed‘ в свойстве рендеринга текста SVG.

optimizeLegibility

То же, что и ‘optimizeLegibility‘ в свойстве рендеринга текста SVG.

geometricPrecision

То же, что и ‘geometricPrecision‘ в свойстве рендеринга текста SVG.

 

Алгоритм подготовки текста (text preparation algorithm) следующий. В качестве входных данных он принимает строку text, объект CanvasTextDrawingStyles target и необязательную длину maxWidth. Он возвращает массив форм глифов, каждая из которых расположена в общем координатном пространстве, physical alignment (физическое выравнивание), значение которого равно одному из left, right и center, а также встроенный блок. (Большинство вызывающих этот алгоритм игнорируют физическое выравнивание physical alignment и встроенный блок.)

1. Если параметр maxWidth был предоставлен, но он меньше или равен нулю или равен NaN, то возвращается пустой массив.

2. Замените все пробелы ASCII в тексте text символами U+0020 SPACE.

3. Пусть font будет текущим шрифтом цели target, заданным атрибутом font этого объекта.

4. Примените соответствующий шаг из следующего списка, чтобы определить значение направления direction:

Если атрибут direction целевого объекта target имеет значение «ltr»

Пусть направление direction будет ‘ltr‘.

Если атрибут direction целевого объекта target имеет значение «rtl»

Пусть направление direction будет ‘rtl‘.

Если исходный объект стиля шрифта целевого объекта target является элементом

Пусть направление direction будет направлением исходного объекта стиля шрифта целевого объекта target.

Если исходный объект стиля шрифта целевого объекта target является документом с ненулевым элементом документа

Пусть направление direction будет направлением элемента документа исходного объекта стиля шрифта целевого объекта target.

В противном случае

Пусть направление direction будет ‘ltr‘.

5. Сформируйте гипотетический бесконечно широкий линейный блок CSS, содержащий один встроенный блок, содержащий текст text, с его свойствами CSS, установленными следующим образом:

Property Source
‘direction’ direction
‘font’ font
‘font-kerning’ target‘s fontKerning
‘font-stretch’ target‘s fontStretch
‘font-variant-caps’ target‘s fontVariantCaps
‘letter-spacing’ target‘s letterSpacing
SVG text-rendering target‘s textRendering
‘white-space’ ‘pre’
‘word-spacing’ target‘s wordSpacing

и со всеми другими свойствами, установленными в их начальные значения.

6. Если параметр maxWidth был предоставлен, а гипотетическая ширина встроенного блока в гипотетическом линейном блоке больше, чем maxWidth CSS-пиксели, измените шрифт на более сжатый (если он доступен или если достаточно читаемый шрифт может быть синтезирован путем применения коэффициента масштабирования по горизонтали к шрифту) или шрифт меньшего размера и вернитесь к предыдущему шагу.

7. Точка привязки (anchor point) — это точка на встроенном блоке, а physical alignment (физическое выравнивание) — одно из значений left, right и center. Эти переменные определяются значениями textAlign и textBaseline следующим образом:

Горизонтальное положение:

Если textAlign является left

Если textAlign является start, а направление direction является ‘ltr’

Если textAlign является end, а направление direction является ‘rtl’

Пусть точка привязки anchor point по горизонтали будет левым краем встроенного блока, а физическое выравнивание physical alignment будет left.

Если textAlign является right

Если textAlign является end, а направление direction является ‘ltr’

Если textAlign является start, а направление direction является ‘rtl’

Пусть точка привязки по горизонтали будет правым краем встроенного блока, и пусть физическое выравнивание будет right.

Если textAlign является center

Пусть точка привязки anchor point по горизонтали будет посередине между левым и правым краями встроенного блока, а физическое выравнивание physical alignment будет center.

 

Вертикальное положение:

Если textBaseline является top (наверху)

Пусть точка привязки anchor point по вертикали будет верхней частью блока em первого доступного шрифта встроенного блока.

Если textBaseline является hanging (висит)

Пуст точка привязки anchor point по вертикали будет базовой линией первого доступного шрифта встроенного блока.

Если textBaseline является middle (средний)

Пусть точка привязки anchor point по вертикали будет на полпути между нижней и верхней частью поля em первого доступного шрифта встроенного блока.

Если textBaseline является alphabetic (алфавитным)

Пусть точка привязки anchor point по вертикали будет алфавитной базовой линией первого доступного шрифта встроенного блока.

Если textBaseline является ideographic (идеографическим)

Пусть точка привязки anchor point по вертикали будет идеографической нижней базовой линией первого доступного шрифта встроенного блока.

Если textBaseline является bottom (находится внизу)

Пусть точка привязки anchor point по вертикали будет нижней частью блока em первого доступного шрифта встроенного блока.

8. Пусть результатом result будет массив, созданный путем итерации по каждому глифу во встроенном поле слева направо (если есть), добавления к массиву для каждого глифа формы глифа, как он есть во встроенном поле, расположенного на координате пространство с использованием пикселей CSS с его источником находится в точке привязки anchor point.

9. Вернуть результат result, физическое выравнивание physical alignment и встроенный блок.

 

Информационные ссылки

Стандарт HTML — Раздел «4.12.5.1.4 Text styles» — https://html.spec.whatwg.org/multipage/canvas.html#text-styles