Первая версия слогана для Мотора была такой:
Верстать слоган нужно было текстом, но чтобы он точно умещался между крайними штрихами „m“ и „r“. Подбор межбуквенного растояния (
Спасение, как это часто бывает, нашлось в таблице. Код получился страшный, но работающий:
Потом слоган поменяли на короткий «всё что движется». Таблица уже была не нужна, зачем тянуть 3 буквы на 300 пикселей. Но убивать своё изобретение мне не хотелось, и чтобы оправдать его жизнь я придумал прикольную анимацию слогана. Правда на боевой сервер она не попала (главный редактор не поверил арт-директору, что она — годная), и сейчас там моя табличка просто для того, чтобы вводить в ступор любопытствующих технологов.
Верстать слоган нужно было текстом, но чтобы он точно умещался между крайними штрихами „m“ и „r“. Подбор межбуквенного растояния (
letter-spacing) не дал никакого результата — в разных браузерах всё выглядело по разному, при масштабировании шрифтов дико разъезжалось, а убери пару букв — значение нужно опять подбирать экспериментально.Спасение, как это часто бывает, нашлось в таблице. Код получился страшный, но работающий:
<table><tr><td>И</td><td class="r"> </td><td>с</td><td class="r"> </td><td>т</td><td class="r"> </td><td>о</td><td class="r"> </td><td>р</td><td class="r"> </td><td>и</td><td class="r"> </td><td>и</td><td class="r"> </td><td> </td><td class="r"> </td> <td>о</td><td class="r"> </td><td>б</td><td class="r"> </td><td> </td><td class="r"> </td> <td>а</td><td class="r"> </td><td>в</td><td class="r"> </td><td>т</td><td class="r"> </td><td>о</td><td class="r"> </td><td>м</td><td class="r"> </td><td>о</td><td class="r"> </td><td>б</td><td class="r"> </td><td>и</td><td class="r"> </td><td>л</td><td class="r"> </td><td>я</td><td class="r"> </td><td>х</td><td class="r"> </td><td> </td><td class="r"> </td> <td>и</td><td class="r"> </td><td> </td><td class="r"> </td> <td>л</td><td class="r"> </td><td>ю</td><td class="r"> </td><td>д</td><td class="r"> </td><td>я</td><td class="r"> </td><td>х</td></tr></table>
У ячейки с буквой ширина 1px, с пробелом — auto. Магия в том, что ячейка таблицы не умеет быть меньше своего содержимого, и в данном случае принимает ширину своей буквы, а пустые ячейки автоматически и равномерно заполняют оставшееся от букв место.Потом слоган поменяли на короткий «всё что движется». Таблица уже была не нужна, зачем тянуть 3 буквы на 300 пикселей. Но убивать своё изобретение мне не хотелось, и чтобы оправдать его жизнь я придумал прикольную анимацию слогана. Правда на боевой сервер она не попала (главный редактор не поверил арт-директору, что она — годная), и сейчас там моя табличка просто для того, чтобы вводить в ступор любопытствующих технологов.