Выделение заглавных букв

24-06-2010

Выделение первых букв используют очень многие дизайнеры, они могут иметь другой шрифт, другой цвет, или даже быть картинкой вместо буквы. В этом уроке мы попытаемся выделить первые буквы параграфов использую HTML разметку, CSS стили, а затем попробуем автоматизировать процесс с помощью PHP функции.

HTML

Для того чтобы выделить первую букву параграфа, мы должны обернуть его в специальный HTML элемент к которому мы затем сможем применять некоторые CSS стили. Для этого я собираюсь использовать простой span элемент с классом initialcap. Результат будет выглядеть примерно так:

Первая буква текст текст текст, ...

Только не повторяйте букву после spana

CSS

Пришло время для написания CSS стилей, но для начала условимся что наш параграф имеет размер шрифта 14 пикселей, и высоту строки в 18 пикселей.
1.Сдвинем нашу первую букву влево, что бы весь текст параграфа обтекал его

span.initialcap{
    float: left;
}

2. Применим к нему размер шрифта 40 пикселей и высоту строки в 35 пикселей, чтобы буква отличалась от остального текста.

span.initialcap{
    float: left;
 
    font-size: 40px;
    line-height: 35px;
}

Каталог исходников.

3. Ну и применим к нашей букве шрифт Serif, синий цвет и добавим маленькое пространство справа.

span.initialcap{
    float: left;
 
    font-size: 40px;
    line-height: 35px; 
 
    font-family: Georgia, "Times New Roman", Times, serif;
    color: #2583ad; /* синий */
    padding-right: 5px;
}

Автоматизация

Ну а теперь последний этап урока автоматизация всего того что мы делали с помощью конечно же PHP. Вы же не будете каждый раз вручную прописывать span с классом. Эта функция поможет этого не делать:

function wpguy_initial_cap($content){
 
    $searchfor = '/>(<a [^>]+>)?([^<s])/';
 
    $replacewith = '>$1<span class="initialcap">$2</span>';
 
    $content = preg_replace($searchfor, $replacewith, $content, 1);
 
    return $content;
}

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

Andrei6.25.2010 09:06
Очень интересная методика! Спасибо!
petRICH6.25.2010 06:06
Отличный материал. Обязательно попробую использовать на своем блоге. Хотелось бы подробнее узнать как именно использовать эту PHP функцию так как я новичок
    admin6.25.2010 06:06
    Ладно, на днях дополню использование, в вордпрессе наверное.. жди)
roman6.27.2010 09:06
Возникает вопрос как воспримут это поисковики на случай, если ключевик будет первым словом в абзаце. Ведь первая буква и оставщаяся часть - это по сути будут разными словами.
    admin6.27.2010 10:06
    Если честно не знаю... но вроде у тех кто такое использует на своих сайтах нормально все...
Игорь Квентор7.5.2010 05:07
2 roman: слово останется одно. ПС не читают тэги. И если между буквой и остальной частью не будет пробела, то слово в любом случае будет одно
    Fisk3.9.2011 07:03
    у меня на сайте одного фотографа http://tigrena.com.ua все меню так были сделан (первая буква другого цвета) но при этом поисковики неправильно индексируют например вместо слова About индексируют bout, не Catalog а atalog, не Сontacts а ontacts... вот такие пироги. Р.С. способ такого эффекта сам допер :)
      admin3.9.2011 09:03
      Можт эффект javascript'ом был сделан а не PHP ?
      Fisk3.10.2011 05:03
      именно в пхп делал, нашел в джумле функцию вівода меню и просто переделал но возможно я зря сделал розбивку на два тега span? у меня было так: about me .......
      admin3.10.2011 06:03
      тогда попробуй не span использовать а em или какой нибудь тег который не разбивает текст... все таки span это отдельный текстовый блок
      Fisk3.10.2011 09:03
      поменял на about me надеюсь прокатит? спосибо
      Fisk3.10.2011 09:03
      удаляются теги
      admin3.10.2011 09:03
      я понял да...)))
      Fisk4.3.2011 09:04
      уже правильно индексирует слова (целиком). Спосибо!
Константин12.20.2010 01:12
2 admin: Не могли бы написать куда вставить эту функцию чтоб все работало автоматически? Как ее использовать?
Константин12.20.2010 01:12
2 admin: как ее использовать в wordpress?
    admin12.20.2010 07:12
    находишь функцию которая выводит контент страниц или постов, вставляешь ее в эту wpguy_initial_cap(/*здесь функция*/), помоему the_content() называлась поищи в шаблоне, но до этого нужно стили конечно добавить
Константин12.20.2010 09:12
стиль добавил в файле style.css, нашел функцию <?php the_content(Читать полностью »'); ?> в файлах index.php single.php и page.php. Попытался произвести вот такие действия: <?php wpguy_initial_cap(the_content(Читать полностью »')) ?> Синтаксис вставки функции в функцию правильный? Но так ничего и не изменилось... Возможно нужно в каком-то файле описать эту функцию? в каком? Прошу помощи, т.к. в php вообще не силен.
artemeff9.5.2011 10:09
Опять. Зачем писать кучу кода? Если можно обойтись парой строчек: http://htmlbook.ru/css/first-letter
Виктор11.25.2011 09:11
first-letter не работает если сначала идет картинка. А вот если функцию допилить чтоб пропускала все теги и брала только первую букву - самое оно.
ОСТАВИТЬ КОММЕНТАРИЙ