Эффекты прописных и строчных букв с использованием JavaScript или CSS
11 января 2018 | Опубликовано в css | Нет комментариев »
Одни из самых простых текстовых операций JavaScript — преобразования из строчных букв в прописные и обратно. Преобразование только первых букв слов в прописные — это более сложный и пока менее общепринятый, но вполне работоспособный метод. Во многих случаях нет необходимости в использовании JavaScript для этих действий: если содержимое будет находиться только на веб-странице, проще и производительней преобразовывать текст с помощью CSS.
Но у кода CSS есть свои ограничения: он может быть использован для задания стилей только тексту, постоянно присутствующему на веб-странице, такому как абзацы и заголовки, ссылки и так далее, и не может влиять на текст в значениях атрибутов, таких как title (название) и alt (описание). Если нужно оформить текст, перед тем как, например, занести его в базу, то использование JavaScript, возможно, вместе с PHP и атрибутом HTML5 autocapitalize (автоматически преобразовывать в прописную букву) может быть отличным вариантом.
Прописные буквы
С использованием JavaScript это можно сделать так:
var sourceText = "To see a World in a Grain of Sand"; console.log(sourceText.toUpperCase()); > TO SEE A WORLD IN A GRAIN OF SAND
Альтернатива с использованием кода CSS, если текст находится в элементе с идентификатором #auguries1:
#auguries1 { text-transform: uppercase; }
Строчные буквы
В JavaScript для этого можно воспользоваться способом toLowerCase(), показанным ниже на примере, подобном предыдущему:
var sourceText = "And a Heaven in a Wild Flower"; sourceText = sourceText.toLowerCase(); console.log(sourceText); > and a heaven in a wild flower
Альтернатива с использованием кода CSS, если текст находится в элементе класса .auguries2:
.auguries2 { text-transform: lowercase; }
Преобразование только первых букв слов в прописные
Преобразование только первых букв всех слов в прописные в названиях, особенно в английском языке делается с помощью следующей функции JavaScript:
function toTitleCase(str) { return str.replace(/[^-'\s]+/g, function(word) { return word.replace(/^./, function(first) { return first.toUpperCase(); }); }); } var concertTitle = "live-alive in łódź"; console.log(toTitleCase(concertTitle)); > Live-Alive In Łódź
Это очень развитая функция, правильно преобразовывающая буквы после диакритических символов и дефисов.
Альтернатива с использованием кода CSS, если нужно преобразовать все первые буквы во всех словах в элементах заголовков первого уровня:
h1 { text-transform: capitalize; }
Преобразование первой буквы первого слова в предложении нужно настолько часто, что, вероятно, удобнее присоединить его к прототипу строки, создав новый метод:
String.prototype.toSentenceCase = function() { return this.charAt(0).toUpperCase() + this.slice(1); }
Чтобы показать его в консоли:
var auguries = "hold infinity in the palm of your hand"; console.log(auguries.toSentenceCase()); > Hold infinity in the palm of your hand
Альтернатива с использованием кода CSS, если нужно, например, преобразовать первую букву каждого абзаца, использует сочетание селекторов:
p:first-letter { text-transform: uppercase; }
В примерах использованы строки стихов Уильяма Блейка из произведения «Прорицания невинности» (William Blake’s Auguries of Innocence).
Автор урока Dudley Storey
Перевод — Дежурка
Смотрите также:
Оставить ответ
Похожие статьи
- Использование множественных фоновых изображений CSS: основы
- Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
- Использование плавной прокрутки и ее недостатки
- Использование тега span для разделения слов в ссылках в CSS
- Использование порядка расположения множественных фоновых изображений
-
Сайты, посвященные индустрии красоты
-
Микровзаимодействия: секрет крутых приложений
-
Графический дизайн в стиле гранж
-
15 бесплатных экшенов для ретуширования кожи
-
Крутая абстракция в веб-дизайне
-
Использование множественных фоновых изображений CSS: основы
-
Красивые примеры рисунков спиртовыми чернилами
-
Рисуем иконку мышки в Adobe Illustrator
-
Бесплатная типографика в ботаническом стиле
-
Простая фотоманипуляция рыцаря в огне в Adobe Photoshop
-
Новые примеры страниц О нас
-
Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
-
Концептуальная аэрофотосъемка Тома Хегена
-
Бесплатные текстуры для эффекта состаривания
Самые комментируемые
- Текст из крови в Adobe Photoshop
550
- Насколько важно сегодня использовать Web Safe цвета?
539
- 20 наборов кистей для Фотошопа, которые вам пригодятся
531
- Текст из воды в Adobe Photoshop
518
- 45 новых удивительных наборов кистей для творчества
423
- Более 40 фотореалистичных рисунков
205
- Ретро и винтажная типографика в веб-дизайне
194
- 30 примеров фрактального искусства
191