Форматированный текст: различия между версиями
Sidminik (обсуждение | вклад) Метка: ручная отмена |
Sidminik (обсуждение | вклад) |
||
| (не показано 7 промежуточных версий 3 участников) | |||
| Строка 1: | Строка 1: | ||
'''Форматированный текст''' ( | '''Форматированный текст''' (<code>FormattedText</code>) - элемент отображения текстовых данных с форматированием. | ||
==Общие сведения== | ==Общие сведения== | ||
| Строка 6: | Строка 6: | ||
==Ввод текста== | ==Ввод текста== | ||
*выбрать у элемента FormattedText свойство | *выбрать у элемента <code>FormattedText</code> свойство <code>Data >> Html</code>; | ||
*вызвать с помощью пункта <Expression…> (рис. 6.1) окно | [[Файл:Formatted.png|center]] | ||
*ввести HTML-код в поле | *вызвать с помощью пункта <code>Expression…</code> (рис. 6.1) окно <code>Expression Editor</code>; | ||
[[Файл:Formatted2.png|center]] | |||
*ввести HTML-код в поле <code>Expression:</code>. | |||
==Особенности== | ==Особенности== | ||
*элемент FormattedText отображает введенный HTML-текст с применённым форматированием (итоговый вариант можно увидеть в режиме предварительного просмотра | *элемент FormattedText отображает введенный HTML-текст с применённым форматированием (итоговый вариант можно увидеть в режиме предварительного просмотра <code>Preview</code>; | ||
*весь текст, написанный в свойстве Html, должен быть заключен в тег <body></body>; | *весь текст, написанный в свойстве Html, должен быть заключен в тег <code><body></body></code>; | ||
*в поле ввода текста «Expression:» возможно использование почти все HTML-теги и атрибуты из спецификации XHTML 1.1 (подробнее см. https://www.w3.org/TR/xhtml11/) с некоторыми расширениями для частичной поддержки спецификации HTML5 (подробнее см. https://www.w3.org/TR/2011/WD-html5-20110405/); | *в поле ввода текста «Expression:» возможно использование почти все HTML-теги и атрибуты из спецификации XHTML 1.1 (подробнее см. https://www.w3.org/TR/xhtml11/) с некоторыми расширениями для частичной поддержки спецификации HTML5 (подробнее см. https://www.w3.org/TR/2011/WD-html5-20110405/); | ||
*элемент управления FormattedText поддерживает многие (но не все) стили CSS; | *элемент управления <code>FormattedText</code> поддерживает многие (но не все) стили CSS; | ||
*при использовании допустимых HTML-тегов, которые не поддерживаются дизайнером, они будут игнорироваться. | *при использовании допустимых HTML-тегов, которые не поддерживаются дизайнером, они будут игнорироваться. | ||
==Индексы (надстрочные и подстрочные)== | |||
===Управление вертикальным смещением=== | |||
В CSS стандартные свойства <code>vertical-align:</code> для <code>sup</code> и <code>sub</code> имеют фиксированные алгоритмы смещения. | |||
Использование пунктов (pt) или пикселей (px) позволяет тонко настроить положение: | |||
*<code>vertical-align: 2pt;</code> — положительное значение поднимает <code>sup</code> (надстрочный индекс) выше базовой линии; чем больше число, тем больше «отрыв» от текста; | |||
*<code>vertical-align: -1pt;</code> — отрицательное значение опускает <code>sub</code> (подстрочный индекс); это критично для предотвращения наложения индекса на выносные элементы букв (например, у буквы «р» или «у»). | |||
===Изменение размера индексов=== | |||
По умолчанию браузеры уменьшают индексы до ~75% от размера родителя. | |||
*<code>font-size: 7px;</code> — жесткое задание размера (в данном случае относительно основного текста в 9px) делает формулы и единицы измерения более читаемыми и аккуратными; | |||
*для лучшей адаптивности можно использовать проценты (например, <code>font-size: 75%</code>) или единицы <code>em</code>. | |||
===Влияние на межстрочный интервал (Line-height)=== | |||
Одной из главных проблем индексов является «раздвигание» строк. | |||
Свойство <code>line-height: 1.2;</code> в сочетании с явным указанием <code>vertical-align</code> для индексов помогает сохранить ритм вертикальной сетки. | |||
Если индексы сильно смещены, они могут увеличить высоту отдельной строки, что визуально портит блок текста. | |||
Для решения этой проблемы индексам часто добавляют <code>line-height: 0;</code>. | |||
===Пример использования=== | |||
<syntaxhighlight lang="html"> | |||
<style> | |||
body {font-family: 'Times New Roman', Times, serif; font-size: 9px; line-height: 1.2;} | |||
sup {vertical-align: 2pt; font-size: 7px;} | |||
sub {vertical-align: -1pt; font-size: 7px;} | |||
</style> | |||
<body> | |||
Fields!unit.Value | |||
</body> | |||
</syntaxhighlight> | |||
[[Category:Внутренняя документация]] | |||
[[Category:Тритея]] | |||
[[Category:Дизайнер_документов]] | |||
Текущая версия от 09:37, 23 марта 2026
Форматированный текст (FormattedText) - элемент отображения текстовых данных с форматированием.
Общие сведения
- может выполнять операции слияния данных;
- может отображать форматированный текст в формате HTML (например – при отображении формул или единиц измерения, содержащих надстрочные и/или подстрочные символы).
Ввод текста
- выбрать у элемента
FormattedTextсвойствоData >> Html;
- вызвать с помощью пункта
Expression…(рис. 6.1) окноExpression Editor;
- ввести HTML-код в поле
Expression:.
Особенности
- элемент FormattedText отображает введенный HTML-текст с применённым форматированием (итоговый вариант можно увидеть в режиме предварительного просмотра
Preview; - весь текст, написанный в свойстве Html, должен быть заключен в тег
<body></body>; - в поле ввода текста «Expression:» возможно использование почти все HTML-теги и атрибуты из спецификации XHTML 1.1 (подробнее см. https://www.w3.org/TR/xhtml11/) с некоторыми расширениями для частичной поддержки спецификации HTML5 (подробнее см. https://www.w3.org/TR/2011/WD-html5-20110405/);
- элемент управления
FormattedTextподдерживает многие (но не все) стили CSS; - при использовании допустимых HTML-тегов, которые не поддерживаются дизайнером, они будут игнорироваться.
Индексы (надстрочные и подстрочные)
Управление вертикальным смещением
В CSS стандартные свойства vertical-align: для sup и sub имеют фиксированные алгоритмы смещения.
Использование пунктов (pt) или пикселей (px) позволяет тонко настроить положение:
vertical-align: 2pt;— положительное значение поднимаетsup(надстрочный индекс) выше базовой линии; чем больше число, тем больше «отрыв» от текста;vertical-align: -1pt;— отрицательное значение опускаетsub(подстрочный индекс); это критично для предотвращения наложения индекса на выносные элементы букв (например, у буквы «р» или «у»).
Изменение размера индексов
По умолчанию браузеры уменьшают индексы до ~75% от размера родителя.
font-size: 7px;— жесткое задание размера (в данном случае относительно основного текста в 9px) делает формулы и единицы измерения более читаемыми и аккуратными;- для лучшей адаптивности можно использовать проценты (например,
font-size: 75%) или единицыem.
Влияние на межстрочный интервал (Line-height)
Одной из главных проблем индексов является «раздвигание» строк.
Свойство line-height: 1.2; в сочетании с явным указанием vertical-align для индексов помогает сохранить ритм вертикальной сетки.
Если индексы сильно смещены, они могут увеличить высоту отдельной строки, что визуально портит блок текста.
Для решения этой проблемы индексам часто добавляют line-height: 0;.
Пример использования
<style>
body {font-family: 'Times New Roman', Times, serif; font-size: 9px; line-height: 1.2;}
sup {vertical-align: 2pt; font-size: 7px;}
sub {vertical-align: -1pt; font-size: 7px;}
</style>
<body>
Fields!unit.Value
</body>