Впервые за десять месяцев мы, помимо ликвидации последствий катастрофы, начали делать что-то полезное для сайта. Вчера мы выложили апдейт, где полностью перелопачен макет страницы с таблицами спряжений. И это не только дизайн и layout — кардинально изменена внутренняя структура таблиц спряжения. И главное достижение такой переработки — это компактное отображения спряжений на экранах телефонов. Сравните: было — стало!
Там, где это возможно, мы выводим спряжения в два столбика. При кажущейся простоте такого решения, оно на самом деле устроено очень нетривиально. Если просто разбить экран на две половинки и заталкивать спряжения в две колонки, то они на экранах не помещаются — их возможно разместить обе только в том случае, если одна будет шире за счет другой.
И тут начинается шаманство!
Как узнать ширину самой длинной строчки в колонке? По буквам считать бессмысленно — «m», например, в три раза шире, чем «i». Более того: в каждой операционной системе используется свой шрифт — то, что на Андроиде будет одной ширины в пикселях, на iOS или под Windows — совершенно другой.
Чтобы рассчитать ширины колонок, мы виртуально «отрисовываем» таблицу спряжения родным для текущей платформы шрифтом и для каждого времени каждого глагола во всех его 24-х залогах и формах заносим получившуюся ширину блока в базу. Мы не обсчитывали эти ширины заранее. Работает это так: если для текущей операционной системы у этого глагола размеры колонок еще не были посчитаны, мы определяем их на лету и заносим в базу, а если они прежде уже были заданы, берем их оттуда готовыми.
Хитроумный прием, но он позволяет отрисовывать таблицы спряжения в компактном виде даже на экранов телефонов в 360 пикселей! Правда, именно для этого разрешения пришлось на два пикселя подобрать поля по краям экрана.
Напомню: эти экранные пиксели — не то же самое, что разрешение экрана телефона. Например, iPhone X, 6, 7, 8 имеет ширину 375 пикселей, у 5-го — 320, Samsung Galaxy S8+ — 360 px, у последних моделей Samsung Galaxy и iPhone эти цифры выше 400.
Понятное дело, что если выбрать какой-нибудь длинный глагол, да еще и спрягнуть его в возвратном залоге в отрицании и в форме вопроса, то такой ни на каком экране не влезет в два столбика. Но в том-то и прелесть, что как только таблица сжимается, она тут же становится двуколоночной.
Еще одно заметное изменение — это особенности спряжения: раньше на телефонах они размещались под таблицой спряжения, а теперь мы поместили их над, убрав под спойлер.
Какие еще были сделаны изменения и как, можно увидеть из фрагментов переписки с Викой, которая всегда помогает нам с дизайном.
И еще маленькая, но приятная фишка: мы отключили в спрягалке рекламу для тех, кто хоть раз угощал нас чашечкой кофе или компостировал билетик. Оставили только на десктопе один блок в правой колонке вверху — из эстетических соображений, потому что без него все съезжает и получается горбуха.
