Gingerbread Architecture in Thailand Scheme - How i made it

Иногда хочется похвастаться, сейчас это делаю 🙂

Немножко горжусь этой работой. В Бангкоке много храмов, но также много пряничной архитектуры. Сильнее всего она сконцентрирована в районе Дусит. Точнее была сконцентрирована.

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

До меня этого никто не делал, так что информация действительно уникальная.

Сначала я решил сделать в формате PNG. Но схема получается совсем неинтерактивной и не четкой при зуммировании.

Решил переделать в формате SVG. По сути это вариант XML. Но вот поддержка шрифтов там бедовая. Был вариант конечно, каждый используемый символ описать кривыми, и раскидывать координатами по листу. Но опять это получится хоть теперь уже и векторный, но рисунок. А мне хотелось бы именно сохранить осмысленный текст.

А вот и вариант SVG с текстом. Шрифт пришлось использовать стандартный, потому что, несмотря на то, что поддержка разных шрифтов задекларирована в формате, в реальности она не реализуется браузерами. А мне хотелось бы, чтобы текст был читаемым. Пришлось чуток перемакетировать, чтобы уместились без перекрытий подписи стандартным Arial (от narrow или condensed тоже пришлось отказаться из-за отсутствия поддержки).

 

Дальше я решил добавить в SVG чуток интерактива - я на этом же сайте сделал для каждого объекта свою страницу, поэтому добавил в подписи ссылки на эти страницы. Получилось как-то так:

 

Но есть нюанс. С большой вероятностью (в 2022 году это около 70%) вы смотрите эту страницу с мобильного телефона, и поражаетесь, зачем я сделал столько мелких деталей, которые даже не разглядеть. Конечно я подумал о несчастном большинстве, потребляющем контент с мелких экранов. Я решил переделать схему так. чтобы она была крупнее. Поэтому решил избавиться от большинства подписей.

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

Две главные задачи:

1. Картинка должна нормально работать не только у меня на сайте, но и у любого, кто ее скачает.

2. Картинка должна быть удобна для использования на и на десктопе и на телефоне.

Надеюсь тут люди не чуждые веб-разработке немного заинтересуются. По сути нужно было сделать интерактивное изображение, которое адекватно реагирует на попытки взаимодействия как с помощью мыши, так и с помощью касаний экрана пальцами (тапа по экрану). При этом нельзя использовать программирование (даже jscript). Все только с помощью стилизации средствами SVG и встроенного в файл CSS.

В результате я решил следующие проблемы:

1. Разнести стили и элементы для двух режимов отображения - мобильном и обычном. Тут все решилось просто с помощью Ховер-Ховер.

2. Придумать так, чтобы описание здания появлялось при наведении мыши на само здание и переход по ссылке осуществлялся по щелчку на здании. Но, при этом, в мобильном варианте по тапу пальцем должно лишь появляться описание, а переход по ссылке осуществлялся бы по следующему тапу по тексту описания. То есть интерфейс должен быть интуитивным для обоих режимов работы. Пришлось изрядно повозиться. Так как по условию задачи у нас есть лишь SVG и CSS. Поэтому в самой картинке пришлось создавать копии зданий обернутые в ссылки. И играть с их видимостью. Теперь я точно знаю, что для visibility в SVG hidden и collapse - две большие разницы, кто бы ни утверждал обратное.

3. Так как по маленькому экрану тыкают толстыми культяпками, то маленькие здания не ловили hover от толстого пальца. С удивлением узнал, что при opacity:0 объект или его часть ховер не ловит. В ход пошли dirty tricks в виде opacity:0.001 для широкого бордера.

4. Сделать так, чтобы при тапе на объекте А показывался бы объект В, по тапу вне объектов А и В после этого объект В исчезал бы, в случае же если мы после тапаем по отображенному объекту B, то осуществлялся бы переход по ссылке. Фишка в том, что сначала объект В невидимый, и лишь при событии ховер (тап по экрану) на объекте А объект В отображается. Соответственно, как только объект А теряет ховер и актив и фокус и все что угодно еще (при тапе где угодно вне объекта А), то объект В исчезает и по нему тап уже не обрабатывается и переход по ссылке не осуществляется. Опять пришлось прибегнуть к грязным уловкам и поиграть с transition. Тут я и узнал, что тап по объекту в мобильных браузерах обрабатывается через одно место. При тапе по экрану вне объекта А, объект А теряет ховер моментально, а вот новый объект, по которому осуществлен тап, обрабатывает его лишь спустя пятую долю секунды. И если с присутствием задержки все понятно, она необходимо для дифференциации двух тапов и даблтапа. То почему тогда потеря ховера на первом объекте происходит моментально? Кстати я понимаю, что проблему можно решить, увеличивая объект А при ховере так, чтобы объект В становился его частью, но делать эти непростые вычисления было лень.

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

P.S. И поверьте, я не использовал никаких референсов, все решения придуманы лишь используя описание стандартов CSS и SVG. Я бы может и рад был взять за основу чей-нибудь пример, но просто не нашел таковых. Если найдете - напишите мне обязательно!

P.p.s. Я знаю, что в IE не работает, но в нем ничего уже не работает.