Что такое P+C DTR?
PHP + CSS Dynamic Text Replacement (P+C DTR) — это версия метода динамической замены текста (статья на A List Apart), но без использования JavaScript.
Вооружившись только PHP и CSS, метод P+C DTR позволяет динамически создавать картинки и заменять ими заголовки страниц. Надоело пользоваться 3-мя заезженными шрифтами? Надоело создавать и редактировать картинки в Photoshop? Если так, то P+C DTR может быть как раз для тебя.
Роль PHP в динамической замене заголовков
Там, где оригинальный метод динамической замены использует JavaScript для замены текста, P+C DTR использует PHP-функцию выходной буферизации (output buffering). Цель этой функции — найти на интернет-странице тэги заголовков, выделить текст и присвоить найденным заголовкам линейный стиль и картинку, которую генерирует скрип.
Разницей между выходной буферизацией и обычной PHP-функцией является то, что метод P+C DTR может быть добавлен к существующей странице без нужды напрямую кодировать линейные стили или вызовы функции.
Стиль заголовков контролируется CSS’ом
Почти сразу после экспериментов с первым методом, проявились его недостатки — цвет и фон заголовков всегда должны совпадать, а стиль заголовков может изменяться только в самом скрипте.
P+C DTR расширяет возможности традиционного метода замены текста, позволяя контролировать с помощью CSS такие параметры как цвет шрифта, цвет фона и даже размер шрифта.
При первой загрузке страницы, CSS-файл, предназначенный для заголовков, автоматически добавляется к сессии браузера. Это означает, что обращение к CSS-файлу происходит только один раз за сессию.
Ограничения
Главным ограничением этого метода является то, что он не будет работать при отключенных в браузере картинках. Также есть ещё несколько ограничений:
- Заголовкам нельзя присваивать
id,classи другие атрибуты. - Текст заголовка не должен быть очень длинным, так как он не будет переноситься на другую строку (отсутствие word-wrapping).
- Нельзя изменять стиль заголовка в зависимости от страницы.
Инструкции по скачиванию и установке
- Скачай zip-файл P+C DTR и распакуй архив.
- Открой файл
image.php, чтобы создать свойства шрифта и прописать путь к файлу шрифта. - Загрузи файлы на сервер для тестирования.
- Если отсутствует текст заголовка в виде картинки, то скорей всего сервер не поддерживает PHP-генерацию картинок.
- При возникновении ошибки: The server could not create this heading image, попрубуй воспользоваться советом от excitris.com (англ.)
Чтобы сбросить все значения сессии, добавьте ?debug=true в конец ссылки создаваемой страницы.
По теме: Любой шрифт на вашем сайте. sIFR
От лукавого это. Если применять, то только для своих личных нужд типа сайта-визитки или чего-то подобного. В коммерческой работе я бы не стал использовать.
Кстати, недавно пришлось убирать sIFR-заголовки со страниц сайта одной американской хостинг-компании. Клиент был недоволен багами под Линуксом, а так же той картинкой, которую наблюдали пользователи Firefox с активным экстеншеном AdBlock.
И если даже sIFR ещё очень сырая технология, то что уж говорить об этом чуде технологической мысли.
Максим, 2 самых больших недостатка этого метода – ограниченная длина заголовков и настройка браузеров, скрывающая картинки.
Если известна статическая ширина колонки, то думаю, стоит применять этот метод для постоянных заголовков.
Что касается скрытия картинок. P+C DTR ещё в стадии разработки. И возможно создатели этого метода додумаются вставлять картинку между тэгами заголовка и параллельно оставлять текст, применяя к нему негативный отступ. Хотя если картинка отсутствует, как об этом узнает скрипт, чтобы убрать из CSS негативный отступ для правильно отображения текста. Это, на мой взгляд, самая большая проблема доступности этого метода. Возможно, найдётся решение.
Конечно, sIFR ещё очень сырая технология и если мне не изменяет память, то её создатели вели переговоры с разработчиками AdBlock, чтобы устранить между собой неправильное взаимодействие.
Вообще, всем разработчикам операционных систем необходимо придумать механизм обновления шрифтов из общепризнанной базы, чтобы у каждого на компьютере с выходом в интернет автоматически обновлялся список шрифтов. Было бы идеальное решение на мой взгляд.
Если и придумают, то ещё много времени пройдёт до того момента, как задумка заработает.
Кстати, sIFR-заголовки очень непредсказуемо ведут себя, когда ненароком задеваещь padding-и или, иначе говоря, каким-то образом играешь с размерами заменяемого элемента.
Да, sIFR требует тонкой настройки при изменении размеров контейнеров или просто размеров шрифта.
Насколько я успел проиграться с sIFR, мне всегда удавалось добиваться компромиссов, необходимых для реализации требуемых результатов.
Зачем переносить работу с заголовками на сервер, когда есть sIFR? Кроме того, имхо, сифр больше подходит для заголовков постов, статей и etc, а P+C DTR для единичных надписей.
В комментариях к оригинальной статье имеется дополнение к P+C DTR, решающее проблему ограничения длины заголовков. http://excitris.com
Материал очень интересный, но обратите внимание на огромный недостаток такой технологии – это ухудшит позиции в поисковых машинах, причем существенно, для всех страниц с такими заголовками. Тэг H1 один из важных факторов для поисковой оптимизации, игнорировать его очень неразумно, т.к. трафик = деньги.
Никогда не использовал H1, для чего такой громадный текст ‘лепить”, поисковики с радостью “едят” теги STRONG и B, выделяете слова по которым хотите поднять страницу в поиске, и будет вам приток посетителей, а H1 много текста не выделишь, разве что только заголовок страницы.
Проблемы с размерами шрифта и видимостью решаются при момощи CSS. Тем более если на картинку повесить альт она будеть иметь такой же вес как текст в H1. Проверено!