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

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

HTML

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

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

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

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, ну и возвращает обратно уже отформатированный контент.
Для того чтобы воспользоваться этой функцией на своем сайте нужно просто при выводе контента проводить через эту функцию, не забыв перед этим прописать стили.