С недавних пор в приложении ПланФикс для Android появилась поддержка отображения html-разметки в текстовых полях. Соответственно, там теперь тоже будут видны описанные выше цветные метки на основе набора значений справочника с полем типа "Текст" (ну, или просто раскрашенные значения текстового поля справочника).
Но есть нюанс! (c)
Микро-движок, который используется в приложении для отрисовки html-текста, сильно упрощён. Из используемых в цветных метках параметров он понимает только цвет фона. Тоже неплохо, в принципе. Можно также задать цвет текста, что весьма важно, если цвет фона тёмный, но для этого нужно использовать другой способ — тег font.
В связи с этим я решил поделиться тут цельным рецептом.
Для получения метки, красиво отображающейся в вебе (с цветным текстом на цветной скруглённой по углам плашке с отступами и окантовкой) и нормально отображающейся в приложении на Android (только с цветным текстом на цветной прямоугольной плашке без настраиваемых отступов), я использую такой шаблон:
Код: Выделить всё
<span style="color:ЦВЕТТЕКСТА; background-color:ЦВЕТФОНА; border: solid 1px ЦВЕТОКАНТОВКИ; padding: 0.2em 0.5em; border-radius: 0.3em; line-height: 2;"><font color="ЦВЕТТЕКСТА">НАЗВАНИЕ</font></span>
Параметр "color:ЦВЕТТЕКСТА" задаёт цвет текста для отображения в браузере, а тег "<font color="ЦВЕТТЕКСТА">" задаёт цвет текста для отображения в приложении.
Нужно задавать цвет текста именно два раза, потому что современные браузеры могут игнорировать тег "font".
Но оказалось, что у этого нюанса есть собственные хитрые нюансы! Цвет текста в теге font не должен быть белым! Если задать шрифту белый цвет, то он будет написан чёрным!
Подозреваю, что белый цвет воспринимается движком как цвет по умолчанию или вроде того, и потому заменяется чёрным. Поэтому для отображения текста белым цветом надо использовать немножечко затемнённый белый: <font color="
#fefefe">название</font>, тогда всё будет в порядке.
Кроме того, оказалось, что в теге "<font color="ЦВЕТТЕКСТА">" цвет можно задавать только в формате
#RrGgBb или его html-именем — red, green и т.д. (но не white!). А вот более универсальный и при этом человекопонятный формат rgb(r,g,b) здесь или не работает, или ведёт себя очень странно.
Кстати, в разметке также нормально работают теги <b>
жирный</b>, <i>
наклонный</i>, <u>
подчёркнутый</u> и <s>--зачёркнутый--</s> (в форуме не предусмотрен).
Примеры меток:
- Цветные метки в вебе, пример.png (3.13 КБ) 3499 просмотров
Цветные метки в Android, пример
Код: Выделить всё
Зелёная:
<span style="color:#ffffff; background-color:#27ae60; border: solid 1px #239252; padding: 0.2em 0.5em; border-radius: 0.3em; line-height: 2;"><font color="#fefefe">зелёная</font></span>
Жёлтая:
<span style="color:#000000; background-color:#ffff00; border: solid 1px #e4e402; padding: 0.2em 0.5em; border-radius: 0.3em; line-height: 2;"><font color="#000000">жёлтая</font></span>
Синяя:
<span style="color:#ffffff; background-color:#2980b9; border: solid 1px #256fa0; padding: 0.2em 0.5em; border-radius: 0.3em; line-height: 2;"><font color="#fefefe">синяя</font></span>
Сиреневая:
<span style="color:#ffffff; background-color:#8e44ad; border: solid 1px #7d3b98; padding: 0.2em 0.5em; border-radius: 0.3em; line-height: 2;"><font color="#fefefe">сиреневая</font></span>
Красная:
<span style="color:#ffffff; background-color:#c0392b; border: solid 1px #98281d; padding: 0.2em 0.5em; border-radius: 0.3em; line-height: 2;"><font color="#fefefe">красная</font></span>