← All posts tagged CSS

OCTAGRAM
web CSS svg В SVG есть текстуры. В частности, растровые можно устроить. Но в FireFox, если открыть SVG в отдельной вкладке, текстура отрисовывается всегда, а если указать SVG как background url, то только если она внедрена как data. Внешние связи не работают. Наверное, это как-то связано с безопасностью, а, может, движок так радикально свои возможности расширить не может.

Вопрос актуален ещё в связи с потенциально нестандартными шрифтами. На всякий случай в кривые перегоняю текстовые элементы перед экспортом в веб.
OCTAGRAM
графика sRGB scRGB Неправильная и правильная обработка изображений
До вчерашнего дня не знал, что RGB, который на мониторе, в CSS веба и вообще везде — официально нелинейный. Думал, что подстройка гаммы — это не более, чем настройка на мониторе. Но нет, у стандартного RGB (sRGB) приблизительно степенной закон 2.2. И половина между 0 и 255 — это 187. Так что без конвертации в/из линейный RGB ничего почти нельзя корректно сделать. Даже в градации серого нельзя корректно свести. И нас таких, не в курсе про нелинейность, похоже, очень много.

Альфа-канал такой конвертации не подлежит, во всяком случае, в PNG. Но тогда стандартных 8 бит не хватит по разрядности, чтобы иметь возможность получать при наложении полупрозрачного белого на чёрный или наоборот все оттенки серого в sRGB. По крайней мере, для альфа-канала высокая разрядность — это не блажь, а необходимость.

И, как показывают тесты, правильно наложение в софте мало, где сделано. Вот в браузере если наложить чёрный с варьирующимся альфа-каналом поверх белого фона, результат будет неправильный. Всё (почти), что было мне привычно, оказывается, работает неправильно. Технически наиболее подходящее решение проблемы — это scRGB, у которого есть представление в виде линейных 16-битных чисел.

По сравнению с sRGB, диапазон расширен в восемь раз, от -0,5sRGB до 7,5sRGB, что позволяет представить в этом формате весь диапазон доступных восприятию цветов типа суперзелёного. И, начиная с Windows Seven, эти цвета по HDMI с соотвествующими HDMI мониторами и видеокартами можно даже отобразить на оверлее или на полном экране средствами DirectX.
OCTAGRAM
Joomla web svg atrsib.ru
Вот как сейчас это выглядит. Сделал на IMG. Чтобы ImageSizer не лез в svg, добавил class="nothumb" к img, иначе куча предупреждений лезет. Наверное, можно забуриться в код ImageSizer и отучить его лезть вообще в любой svg, но пока так. Больше проблем было с тем, чтобы можно было кликать. Чтобы картинка стала кликабельной, я ей навесил <a rel="lightbox">. Проблема усугубляется тем, что у ImageSizer несколько плагинов для отображения картинки, но некоторые из них не понимают <a rel="lightbox">, некоторые дико конфликтуют с bootstrap из–за CSS класса modal, а у mediabox на чёрном фоне не видно чёрные линии и чёрный текст. Самым простым способом мне показалось переделать mediabox на белый фон. Он там был в файлах, но через UI его переключить нельзя, и в самом css файле, который раньше не был задействован, пути абсолютные, ведущие не туда. И затенение почему–то сделано забелением. Перепилил css, сейчас всё как надо. MediaBox на поверку умеет отображать больше, чем просто картинки. Он может youTube видео отображать, а может IFRAME, и на SVG он среагировал именно так. Мне показалось, что есть смысл так и оставить. Из SVG внутри <img> нельзя копировать текст, а из <iframe> — можно.