Emmet | Mai-com

Attribute operators

Attribute operators are used to modify attributes of outputted elements. For example, in HTML and XML you can quickly add class attribute to generated element.

Box sizing

bxz

bxz:cb

bxz:bb

bxsh

bxsh:r

bxsh:ra

bxsh:n

w:a

h:a

maw

maw:n

mah

mah:n

miw

mih

Changing numbering base and direction

With @ modifier, you can change numbering direction (ascending or descending) and base (e.g. start value).

For example, to change direction, add @- after $:

ul>li.item$@-*5

…outputs to

Child: >

You can use > operator to nest elements inside each other:

div>ul>li

…will produce

Climb-up: ^

With > operator you’re descending down the generated tree and positions of all sibling elements will be resolved against the most deepest element:

div div>p>span em 

…will be expanded to

With ^ operator, you can climb one level up the tree and change context where following elements should appear:

div div>p>span em^bq

…outputs to

Custom attributes

You can use [attr] notation (as in CSS) to add custom attributes to your element:

td[title="Hello world!" colspan=3]

…outputs

• You can place as many attributes as you like inside square brackets.
• You don’t have to specify attribute values: td[colspan title] will produce <td colspan="" title=""> with tabstops inside each empty attribute (if your editor supports them).
• You can use single or double quotes for quoting attribute values.
• You don’t need to quote values if they don’t contain spaces: td[title=hello colspan=3] will work.

Elements

You can use elements’ names like div or p to generate HTML tags. Emmet doesn’t have a predefined set of available tag names, you can write any word and transform it into a tag: div → <div></div>, foo → <foo></foo> and so on.

Emmet для css

Следующая задача для верстальщика после создания HTML-страницы,  описать её внешний вид, для этого оформляем стили. В CSS нет разметки или вложенности, как в HTML, — только селектор, свойство и значение. Но и в случае со стилями Emmet даёт ощутимый прирост эффективности.

Emmet на практике: пишем html

Я поделюсь своим опытом, как сейчас использую Emmet при вёрстке.

Первое, с чего начинаю создание HTML-разметки, — пишу базовую структуру, где объявляю тип документа, указываю язык страницы, кодировку, метатеги, заголовок и тело будущей интернет-страницы.

Emmet синтаксис css

Открываем файл стилей, и в нем разберем популярные свойства, который часто задействуем при верстке.

Для того что бы прописать свойство, достаточно в большинстве случаев ввести начальные буквы и оно автоматически дополнится по нажатию на кнопку TAB.

В документации по Emmet, такие свойства написаны через двоеточие, но в большинстве случаев можно писать без них в чем сейчас сами обидитесь.

/* cl:r cll */
clear: right;
clear: left;

Для описания свойств color можно воспользоваться следующими сокращениями.

/* c c# c#25 */
color: #000;
color: #000000;
color: #252525;
/* cra */
color: rgba(0, 0, 0, 0.5);

Что бы присвоить параметры отступов не обязательно прописывать аббревиатуру (px) она автоматически пропишется, а вод для того что бы задать в процентах или в других значения дописываем соответствующую букву.

Emmet синтаксис html

По умолчанию emmet, разворачивает свои аббревиатуры по нажатию на кнопку (Tab), это довольно удобно как по мне и смысла их менять нет. Каждый разработчик знает, насколько утомительно писать скобки и закрывающие теги, а для того что бы создать базовую разметку HTML приходится тратить достаточно много времени.

При помощи Emmet, базовая разметка разворачивается двумя клавишами, прописываем восклицательный знак (!) и нажимаем (TAB) на клавиатуре, тем самым получим базовую разметку HTML страницы.

Id and class

In CSS, you use elem#id and elem.class notation to reach the elements with specified id or class attributes. In Emmet, you can use the very same syntax to add these attributes to specified element:

div#header div.page div#footer.class1.class2.class3

…will output

Item numbering: $

With multiplication * operator you can repeat elements, but with $ you can number them. Place $ operator inside element’s name, attribute’s name or attribute’s value to output current number of repeated element:

ul>li.item$*5

…outputs to

Margin и padding

m:a

mt:a

mr:a

mb:a

ml:a

Multiplication: *

With * operator you can define how many times element should be outputted:

ul>li*5

…outputs to

Nesting operators

Nesting operators are used to position abbreviation elements inside generated tree: whether it should be placed inside or near the context element.

Notes on abbreviation formatting

When you get familiar with Emmet’s abbreviations syntax, you may want to use some formatting to make your abbreviations more readable. For example, use spaces between elements and operators, like this:

(header > ul.nav > li*5) footer

But it won’t work, because space is a stop symbol where Emmet stops abbreviation parsing.

Sibling:

Use operator to place elements near each other, on the same level:

div p bq

…will output

Text: {}

You can use curly braces to add text to element:

a{Click me}

…will produce

Атрибуты id и class

#header

.title

form#search.wide

p.class1.class2.class3

Бонусный уровень: генерируем рыбу-текст

Когда я только начинал заниматься вёрсткой, то читал много мнений: это хорошо, то плохо. Про рыбу-текст пишут разное. Но для меня это полезная вещь, например, для проверки вёрстки на переполнение. 

Если нужен текст на русском языке, то вводим «loremru».

Вводим теги

Когда я только начинал пробовать себя в вёрстке, то печатал всё – от «<» до «>», затем составлял себе шпаргалки с готовыми тегами и копировал их. Чуть далее станет понятно, почему эти способы недостаточно хороши. Сейчас, с плагином, всё просто: пишу название тега  и нажимаю Tab или Enter.

Достаточно ввести первые несколько букв названия тега, чтобы появился выпадающий список с вариантами. Emmet заботливо предложит нужный вариант и, если тег парный, добавит к нему закрывающий.

Некоторые теги Emmet всё же не добавляет. Например, на момент написания этой статьи, не подставляется тег «figcaption». Кто знает, в чём он провинился.

Выше уровнем: ^

div div>p>span em^bq

div div>p>span em^^bq

Границы (border)

bd

bd:n

bdbk

bdbk:c

bdcl

bdcl:c

bdcl:s

bdc

bdc:t

bdi

bdi:n

bdti

bdti:n

bdri

bdri:n

bdbi

bdbi:n

bdli

bdli:n

bdci

bdci:n

bdci:c

bdtli

bdtli:n

bdtli:c

bdtri

bdtri:n

bdtri:c

bdbri

bdbri:n

bdbri:c

bdbli

bdbli:n

bdbli:c

bdf

bdf:c

bdf:r

bdf:sc

bdf:st

bdf:ow

bdf:of

bdf:sp

bdlen

bdlen:a

bdsp

bds

bds:n

bds:h

bds:dt

bds:ds

bds:s

bds:db

bds:dtds

bds:dtdtds

bds:w

bds:g

bds:r

bds:i

bds:o

bdw

bdt, bt

bdt

bdt:n

bdtw

bdts

bdts:n

bdtc

bdtc:t

bdr, br

bdr

bdr:n

bdrw

bdrst

bdrst:n

bdrc

bdrc:t

bdb, bb

bdb

bdb:n

bdbw

bdbs

bdbs:n

bdbc

bdbc:t

bdl, bl

bdl

bdl:n

bdlw

bdls

bdls:n

bdlc

bdlc:t

bdrs

bdtrrs

bdtlrs

bdbrrs

bdblrs

Группировка: ()

div>(header>ul>li*2>a) footer>p

(div>dl>(dt dd)*3) footer>p

Делаем анимацию

По наведению на кнопку данная полоска, должна выезжать с левой стороны до конца блока, затем, заполнять полностью блок по высоте, как убираем курсор, все должно возвращаться в исходное положение.

И первое с чего начнем, с позиционируем полоску за пределами блоков, при помощи left: -100%; мы ее убираем.

left: -100%;

В то же время при наведении на блок ее возвращаем в нулевое положение.

Emmet (l0)

.nav li a:hover::before { left: 0;
}

Для плавности перемещения псевдоэлемента, для него прописываем transition в 0.8 сек. Emmet (trs)

-webkit-transition: .8s;
-moz-transition: .8s;
-ms-transition: .8s;
-o-transition: .8s;
transition: .8s;

Затем все скроем за пределами блока ссылкой, для этого ей присвоим overflow: hidden;.

overflow: hidden;

Элемент не скрылся, так как ссылка является строчным элементом, переводим ее в блочный вид. Emmet (db)

Добавляем ссылки

Ничего сложного в указании ссылок нет, но благодаря Emmet мне стало легко и приятно их добавлять.

Пишу «a» и выбираю нужный вариант — простую гиперссылку, ссылку на номер телефона, электронную почту и так далее. Или можно уточнить тип, начиная вводить после двоеточия значение атрибута. Например, «a:tel».

Дочерний элемент: >

nav>ul>li

Другое

!important

@kf

@m, @media

ac:c

ac:fe

ac:fs

ac:s

ac:sa

ac:sb

ai:b

ai:c

ai:fe

ai:fs

ai:s

anim

anim-

animdel

animdir

animdir:a

animdir:ar

animdir:n

animdir:r

animdur

animfm

animfm:b

animfm:bt, animfm:bh

animfm:f

animic

animic:i

animn

animps

animps:p

animps:r

animtf

animtf:cb

animtf:e

animtf:ei

animtf:eio

animtf:eo

animtf:l

as:a

as:b

as:c

as:fe

as:fs

as:s

bfv

bfv:h

bfv:v

bg:ie

/* ${child} */

colm

colmc

colmf

colmg

colmr

colmrc

colmrs

colmrw

colms

colmw

d:ib

fxb

fxd

fxd:c

fxd:cr

fxd:r

fxd:rr

fxf

fxg

fxsh

fxw

fxw:n

fxw:w

fxw:wr

jc:c

jc:fe

jc:fs

jc:sa

jc:sb

mar

mir

op

op:ms

ord

ori

ori:l

ori:p

tov

tov:c

tov:e

trf

trf:r

trf:rx

trf:ry

trf:rz

trf:sc

trf:sc3

trf:scx

trf:scy

trf:scz

trf:skx

trf:sky

trf:t

trf:t3

trf:tx

trf:ty

trf:tz

trfo

trfs

trs

trsde

trsdu

trsp

trstf

wfsm

wfsm:a

wfsm:n

wfsm:s, wfsm:sa

wm:btl

wm:btr

wm:lrb

wm:lrt

wm:rlb

wm:rlt

wm:tbl

wm:tbr

Единицы измерения

В этом направлении есть несколько правил. Ряд свойств CSS очень удобные в работе и не требуют указания единиц измерения. К этим свойствам относятся, например, font-weight, line-height и opacity. Для описания свойства font-weight помимо ключевых слов normal, bold, bolder и lighter можно использовать условные единицы от 100 до 900, для opacity — диапазон дробных чисел от 0 до 1, для line-height — любой множитель, чаще всего в диапазоне от 1.1 до 2.

Для тех свойств, где могут быть указаны разные единицы измерения, по умолчанию используются абсолютные пиксели (px). При этом нужно указать только число.

Но если мне захотелось указать значение в процентах, тогда использую символ «p». Для остальных единиц измерения прописываю их название.

Чтобы записать дробное значение, достаточно поставить точку, не указывая перед ней 0.

Задаём классы и идентификаторы

Я показал, как вводить теги, а теперь усложним этот процесс. Часто нужно указать класс или id.  Делается это сразу при вводе тега. После ввода названия тега, без пробелов, добавляю символы «.» или «#», пишу название класса или идентификатора, на выходе получаю оформленный тег.

Частный случай, когда нужно задать класс или id для тега <div>, то сразу ставим точку или «решётку», не набирая название тега, затем пишем название класса или идентификатора.

Если вы знакомы с css-селекторами вида section#about.red, то возможно уже обратили внимание на схожесть синтаксиса. Дальше будет интересней – Emmet практически полностью повторяет правила по которым формируются обычные селекторы. Поэтому барьеры входа при изучении Emmet ещё меньше, не надо учить новый синтаксис, используем тот, что есть в css.

Использование декларации !important

Ещё есть фишка с !important, он позволяет повысить приоритет стиля. Здесь всё просто: в конце сокращения ставится восклицательный знак. Но это противоречивая вещь. В курсе по веб-вёрстке преподаватели рекомендовали применять !important в самых крайних случаях, обдуманно.

Используем группировку и вложенность

До этого я показал самые простые возможности Emmet, которые использую. Сейчас начинается настоящая магия.

С помощью синтаксиса Emmet легко создаю сложные конструкции разного уровня вложенности всего из одной строки символов. Это немного похоже на css-селекторы со знаками сложения и умножения.

По отношению друг к другу элементы в HTML-разметке могут быть родительскими, дочерними и соседними. Покажу на примерах, как их можно расположить и сгруппировать.

Пример 1. Соседние элементы

Знак « » создаст несколько соседних тегов, расположенных на одном иерархическом уровне.

А если я хочу повторить элемент 3 раза? Ответ: да очень просто – добавим знак умножения, и вуаля!

Пример 2. Дочерние элементы

Символ «>» делает следующий за ним элемент дочерним по отношению к первому, вложенным, обёрнутым в первый. При этом Emmet не забывает о закрывающих тегах и отступах при форматировании, код будет структурирован и отформатирован.

Пример 3. Сгруппированные элементы

Представим, что нужно создать структуру простой страницы, состоящей из шапки, основной части и подвала. При этом внутри шапки будет навигационная панель в виде маркированного списка без нумерации. А блоки main и footer будут на одном уровне с header.

Чтобы это сделать, header и его содержимое беру в круглые скобки. С их помощью можно сгруппировать элементы с разными уровнями вложенности.

Всё это записываю одной строкой, а на выходе получаю девять. Такая магия с вложенностями и группировками.

Контент (content)

cnt

cnt:n, ct:n

cnt:oq, ct:oq

cnt:noq, ct:noq

cnt:cq, ct:cq

cnt:ncq, ct:ncq

cnt:a, ct:a

cnt:c, ct:c

cnt:cs, ct:cs

q:n

q:ru

q:en

coi

cor

Несколько значений после двоеточия

Бывает, что для описания свойства требуется несколько значений, которые пишутся через пробел. Чаще всего встречается при использовании полей и отступов.

И для такого случая у Emmet есть изящное, на мой взгляд, решение: если единицы измерения пиксели или auto, пишем значения свойства через дефис. Проценты указываем, используя p. Другие единицы измерения (em, rem, wh, wv и так далее) пишем полностью без пробелов.

Не меньше мне нравится использовать частные случаи, например, указание цвета с прозрачностью.

Нумерация: $

ul>li.item$*5

h$[title=item$]{Header $}*3

ul>li.item$$$*5

ul>[email protected]*5

ul>[email protected]*5

Окантовка (outline)

ol:n

olo

olw

olw:tn

olw:m

olw:tc

ols

ols:n

ols:dt

ols:ds

ols:s

ols:db

ols:g

ols:r

ols:i

ols:o

olc

olc:i

Повторение: *

ul>li*5

Подключаем стили и скрипты

Шапка документа готова, далее размещаю теги <link> внутри <head> — с указанием путей к стилям или скриптам. Используя Emmet, я пишу «link», а автоподстановка предложит не только тег целиком, но и готовые варианты: там есть стили CSS, и установка favicon, и многое другое.

Подытожим

Для меня использование Emmet стало одним из слагаемых успеха в качестве веб-разработчика, наряду со знанием горячих клавиш, кодстайла, тегов и свойств.

Создайте для себя «словарь сокращений» Emmet и выучите основные комбинации. Это увеличит скорость написания кода, и со временем вы станете более квалифицированным верстальщиком. Если нужна шпаргалка по всем сокращениям, её можно найти на сайте разработчиков дополнения.

На курсе «Веб-вёрстка» вы познакомитесь со стандартами Web 2.0, научитесь работать с макетами и форматировать код, освоите адаптивную вёрстку, а по итогу — сможете создавать быстрые и удобные сайты, которые точно понравятся пользователям. Посмотреть программу и записаться по ссылке.

Позиционирование и отображение

pos

pos:s

pos:a

pos:r

pos:f

t:a

r:a

b:a

l:a

z:a

fl:n

fl:l

fl:r

cl:n

cl:l

cl:r

cl:b

d:n

d:b

d:f

d:if

d:i

d:ib

d:li

d:ri

d:cp

d:tb

d:itb

d:tbcp

d:tbcl

d:tbclg

d:tbhg

d:tbfg

d:tbr

d:tbrg

d:tbc

d:rb

d:rbb

d:rbbg

d:rbt

d:rbtg

v:v

v:h

v:c

ov:v

ov:h

ov:s

ov:a

ovx

ovx:v

ovx:h

ovx:s

ovx:a

ovy

ovy:v

ovy:h

ovy:s

ovy:a

ovs

ovs:a

ovs:s

ovs:p

ovs:m

ovs:mq

zoo, zm

cp:a

cp:r

rsz

rsz:n

rsz:b

rsz:h

rsz:v

cur

cur:a

cur:d

cur:c

cur:ha

cur:he

cur:m

cur:p

cur:t

Пользовательские атрибуты

p[title=»Hello world”]

td[rowspan=2 colspan=3 title]

[a=’value1’ b=»value2”]

Практический пример по emmet

И к завершению урока, закрепим полученные знания на практике, а заодно посмотрим, насколько удобно набирать код при помощи плагина Emmet.

Для примера создадим простенькое меню, с небольшой анимацией.

рис 4-5 (пример меню)

Создаем файл с расширением html, и при помощи сниппета который создавали (dws:!), формируем основную разметку. Заполняем title, далее при помощи emmet создаем ul с классом .nav, в нем пять списков li, в них вкладываем ссылку с текстовым содержанием.

Жмем TAB, дописываем атрибут (#) и меняем название списков.

Пропуск имён тегов (ещё быстрее)

.class

em>.class

ul>.class

table>.row>.col

Свои сниппеты в phpstorm

В каком бы редакторе с emmet не работали, у вас всегда будет возможность создавать свои аббревиатуры.

К примеру, я часто использую outline обводку, в которой мне приходится периодически прописывать значения свойств outline: 1px solid orange;.

Хоть и одна строчка, но занимает некое время для ее набора, давайте на примере ее создадим сниппет в редакторе PhpStorm.

Открываем настройки PhpStorm, через меню или при помощи сочетания кнопок (CTRL ALT S), переходим в Editor -> Live Templates, жмем на крестик, и создаем отдельную группу, с названием dws CSS.

В данной группе добавляем сниппет, в поле Abbreviation, вписываем аббревиатуру, при которой будет разворачиваться свойство (dws:ou), в поле Description прописываем для себя подсказку (outline:

1px solid orange;) и далее в поле Template text, прописываем сам код (outline: 1px solid orange;). Затем нажимаем Change, из списка выбираем формат CSS, включим данную галочку (reformat according to style), сохранимся, и проверим.

Вводим аббревиатуру на странице(dwsou), и получили сохраненный сниппет.

Разберем еще один пример, мне приходится часто центровать объекты посередине экрана, для этих целей постоянно прописываю данные стили.

body { margin: 0; padding: 0; font-family: Verdana, Geneva, sans-serif;
}
.dws-wrapper { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
}

Создам для них второй сниппет.

Открываем настройки, вводим аббревиатуру dws:b, краткое его описание .dws-wrapper {…}, далее сниппет.

Устанавливаем Change в CSS, ставим галочку, сохраняемся и проверяем.

Таким же подобным образом формируются сниппеты для других расширений файлов. Для примера, коль создали сниппет с классом, для него подготовим сниппет doctype страницы.

Создаем новую группу, dws HTML, в создаем новы сниппет, в поле Abbreviation, вписываем аббревиатуру (dws:!), в поле Description подсказку , в поле Template text, прописываем сам код.

Сокращенные комбинации emmet phpstorm

В Emmet существуют свои сокращения, но в PhpStorm они не все работаю, покажу ту часть, которыми я пользуюсь.

Что бы закомментировать участок кода используется сочетание клавиш (CTRL /). Для комментирования выделенной области нажимаем (CTRL SHRIFT )

Если нужно обернуть текст или код в определенные теги, выделяем его, нажимаем (CTRL ALT J) и выбираем метод написание обертки.

Когда на страницу копируем код, из каких-то источником, в большинстве случаев он не форматированный, с таким кодом неудобно работать, и приходится его приводить к определенному виду. Для этого существует сочетание клавиш (CTRL ALT L), выделяем участок кода, нажимаем, и код отформатирован.

Бывает случаи, когда нужно переместить участок кода выше или ниже по дереву, для этого выделяем область кода,  нажимаем (ALT SHIFT) и при помощи стрелок выше ниже перемещаем его выше ниже по дереву (ALT SHIFT UP или DOWN).

Есть также удобная функция, когда необходимо найти закрывающий тег. Для этого устанавливаем курсор на открывающем теге, жмем сочетание клавиш (CTRL SHIFT M) , и сразу перемещаемся по странице, на закрывающий его тег.

Самое основное, в принципе разобрали, и для закрепления знаний напишем простенький код при помощи emmet.

Соседний элемент:

div p bq

Списки

lis

lis:n

lisp

lisp:i

lisp:o

list

list:n

list:d

list:c

list:s

list:dc

list:dclz

list:lr

list:ur

lisi

lisi:n

Способы ввода сокращений

В работе с CSS используются сокращённые названия свойств. Здесь меньше правил, с некоторым опытом всё становится интуитивно понятным и привычным: набираем первую букву — появляется подстановка всего слова.

Если название свойства составное, тогда слитно либо через дефис набираем первые буквы каждого слова и Emmet подскажет.

Если свойства начинаются на одну и ту же букву или комбинацию букв, например, color и columns, то подобрать сочетания для каждого из них — дело нескольких секунд. Для color будет достаточно «c».

Некоторые сочетания очевидные, например, «fs» предложит нам font-style, но есть и сокращения, к которым надо привыкнуть: «fz» — font-size. Мне понадобилось некоторое время, чтобы выработать стратегию и собственный словарь сокращений.

Ещё одна особенность автоподстановки в CSS: если используешь часто повторяющуюся пару «свойство — значение», то Emmet предложит его в первую очередь. Если во время вёрстки несколько раз указать display: flex, в следующий раз при нажатии «d» этот вариант будет первым в списке.Таким же образом при вводе свойства color в выпадающем списке будут перечислены все ранее указанные цвета.

Таблицы

tbl

tbl:a

tbl:f

cps

cps:t

cps:b

ec:s

ec:h

Текст

va:sup

va:t

va:tt

va:m

va:bl

va:b

va:tb

va:sub

ta:l

ta:c

ta:r

ta:j

ta-lst

tal:a

tal:l

tal:c

tal:r

td:n

td:u

td:o

td:l

te:n

te:ac

te:dt

te:c

te:ds

te:b

te:a

th:a

th:f

th:t

th:m

ti:-

tj:a

tj:iw

tj:ii

tj:ic

tj:d

tj:k

tj:t

to

to:n

tr:n

tt:n

tt:c

tt:u

tt:l

tw:n

tw:no

tw:u

tw:s

tsh

tsh:r

tsh:ra

tsh

tsh:n

lts

lts-n

whs

whs:n

whs:p

whs:nw

whs:pw

whs:pl

whsc

whsc:n

whsc:k

whsc:l

whsc:bs

whsc:ba

wob

wob:n

wob:k

wob:ba

wos

wow

wow:nm

wow:n

wow:u

wow:s

wow:b

Текстовое содержимое: {}

a{Click me}

p>{Click } a{here} { to continue}

Типографика

pgbb

pgbb:au

pgbb:al

pgbb:l

pgbb:r

pgbi

pgbi:au

pgbi:av

pgba

pgba:au

pgba:al

pgba:l

pgba:r

orp

wid

Установка

Для тех, кто ещё совсем не знаком с плагинами, я начну с того, что это такое. Emmet — бесплатный плагин для текстовых редакторов. Напоминает автоподстановку текста в смартфоне, но более функциональную, сокращающую время написания рутинной разметки. Вы вводите несколько символов — начало названия тега или свойства, а программа предлагает самостоятельно дописать остальное, выбрав из выпадающего списка. Остаётся нажать Tab или Enter, и нужный вам код написан целиком.

Уточнения свойств через двоеточие

Для ввода пары «свойство — значение» я использую двоеточие в случаях, когда значение указывается буквами, например, цвет. Это конкретизирует сокращение.

При попытке написать «cred» будут предложены варианты column-rule-width и даже -webkit-column-break-inside. Так будет в VSCode. Всё потому, что одновременно работает IntelliSense, встроенное автодополнение. Если использовать двоеточие, лишние подсказки IntelliSense будут отброшены. Работает Emmet, понятно, что указано значение red для свойства color.

Фон (background)

bg

bg:n

bgc

bgc:t

bgi

bgi:n

bgr

bgr:n

bgr:x

bgr:y

bgr:sp

bgr:rd

bga

bga:f

bga:s

bgp

bgpx

bgpy

bgbk

bgbk:bb

bgbk:eb

bgbk:c

bgcp

bgcp:bb

bgcp:pb

bgcp:cb

bgcp:nc

bgo

bgo:pb

bgo:bb

bgo:cb

bgsz

bgsz:a

bgsz:ct

bgsz:cv

Шрифт

fw:n

fw:b

fw:br

fw:lr

fs:n

fs:i

fs:o

fv:n

fv:sc

fza

fza:n

ff:s

ff:ss

ff:c

ff:f

ff:m

ff:a

ff:t

ff:v

fef

fef:n

fef:eg

fef:eb

fef:o

fem

femp

femp:b

femp:a

fems

fems:n

fems:ac

fems:dt

fems:c

fems:ds

fsm

fsm:a

fsm:n

fsm:aw

fst

fst:n

fst:uc

fst:ec

fst:c

fst:sc

fst:se

fst:e

fst:ee

fst:ue