Форматированный текст

Форматированный текст (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>