Первая версия слогана для Мотора была такой:
Верстать слоган нужно было текстом, но чтобы он точно умещался между крайними штрихами „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 пикселей. Но убивать своё изобретение мне не хотелось, и чтобы оправдать его жизнь я придумал прикольную анимацию слогана. Правда на боевой сервер она не попала (главный редактор не поверил арт-директору, что она — годная), и сейчас там моя табличка просто для того, чтобы вводить в ступор любопытствующих технологов.
У тебя отличный блог :)
Если есть текст, то он должен быть честным текстом и скопироваться должно «Истории об автомобилях и людях». Поэтому не подходит решение прямо в коде написать большими буквами. Я бы использовал отличное css-свойство text-transform: uppercase; А пробелы бы убрал все-таки. Чем их заменить пока в голову не пришло, но что они не подходят — совершенно точно.
Игорь, вот и мне не пришло :-) Все остальные решения оказывались приблизительными, поэтому я и выбрал это — «не лучшее».
Я бы не стал здесь перегибать палку на счёт копипастности текста, всё-таки слоган, это не совсем текст, никто бы не умер если бы он и картинкой даже был. Хотя, продолжаю размышать вслух, если не удалось обеспечить нормальную функциональность это текста, как текста, нужно было, действительно, откатится на картинку и не париться.