Найчастіше в поспіху при додаванні матеріалів на сайт або, наприклад, створенні нової темина форумі користувач може почати писати пропозицію (назву) з маленької (маленької) літери. Це певною мірою є помилкою.

Я покажу кілька варіантів вирішення цього завдання: PHP і CSS підійдуть більше для вже опублікованих матеріалів, коли jQuery зможе виправити положення ще до публікації.

Перша літера рядка у верхньому регістрі на PHP

На PHP існує функція під назвою « ucfirst», яка саме перетворює перший символ рядка у верхній регістр, але мінус його в тому, що він не зовсім коректно працює з кирилицею.

Для цього ми напишемо свою маленьку функцію. Реалізація буде виглядати так:

У такому варіанті ми отримаємо пропозицію, яка починається з великої літери, що, власне, нам і необхідно.

Перша літера рядка у верхньому регістрі CSS

Цей метод візуально (тобто вихідний кодсайту пропозиції будуть виглядати як є) також перетворює перший символ у верхній регістр.

Використання таке:

За допомогою псевдоелементу « first-letterі властивості « text-transformми задали оформлення для кожної першої літери параграфа.

Перша літера рядка у верхньому регістрі на jQuery

Як я вже говорив раніше, цей спосіб перетворення найкраще підійде для матеріалів, які ще будуть публікуватися.

Для прикладу ми візьмемо текстове поле (воно буде виступати у нас як поле для введення заголовка) і напишемо для нього невеликий скрипт, який при введенні речення з маленької літери робить його з великої:

Скрипт спрацьовує як під час написання тексту, і простої його вставці. Не забувайте, що для роботи скриптів на вашому сайті потрібна наявність підключеної бібліотеки jQuery.

Керує перетворенням тексту елемента на великі або великі символи. Коли значення відрізняється від none, регістр вихідного тексту буде змінено.

коротка інформація

Позначення

Значення

capitalize Перший символ кожного слова в реченні буде великим. Інші символи свого вигляду не змінюють. lowercase Усі символи тексту стають малими (нижній регістр). uppercase Усі символи тексту стають великими (верхній регістр). none Не змінює регістр символів.

Пісочниця

Вінні-Пух був завжди не проти трохи підкріпитися, особливо годин об одинадцятій ранку, тому що в цей час сніданок вже давно скінчився, а обід ще й не думав починатися. І, звичайно, він страшенно зрадів, побачивши, що Кролик дістає чашки та тарілки.

div (text-transform: capitalize;)

приклад

Культурна пам'яткаСередньовіччя

Амазонська низовина непомірно бере невеликий провіз кішок і собак, а Хайош-Байя славиться червоними винами.

Результат цього прикладу показано на рис. 1.

Мал. 1. Застосування якості text-transform

Об'єктна модель

Об'єкт.style.textTransform

Специфікація

Кожна специфікація проходить кілька стадій схвалення.

• Recommendation (Рекомендація) - специфікація схвалена W3C та рекомендована як стандарт.
• Candidate Recommendation ( Можлива рекомендація) - група, відповідальна за стандарт, задоволена, як він відповідає своїм цілям, але потрібна допомога спільноти розробників з реалізації стандарту.
• Proposed Recommendation ( Пропонована рекомендація) - на цьому етапі документ подано на розгляд Консультативної ради W3C для остаточного затвердження.
• Working Draft (Робочий проект) - більш зріла версія чернетки після обговорення та внесення поправок для розгляду спільнотою.
• Editor"s draft ( Редакторська чернетка) - Чорнова версія стандарту після внесення правок редакторами проекту.
• Draft ( Чернетка специфікації) – перша чорнова версія стандарту.

Дозволяє змінювати регістр літер тексту.

За замовчуванням встановлюється значення none , яке не впливає на текст. Регістр тексту залишається незмінним. Значення uppercase та lowercase перетворюють символи у верхній та нижній регістр, відповідно. Якщо вказати значення capitalize , то перші символи кожного слова будуть великими. Уherit успадковує значення батька.

приклад

Це заголовок. До нього застосовано властивість text-transform зі значенням uppercase. Всі символи будуть великими.

До цього абзацу застосовано Властивість Text-transform зі значенням Lowercase, а значить усі літери будуть у нижньому регістрі.

А до цього, останнього абзацу застосовано властивість text-transform з властивістю CAPITALIZE. Перші літери кожного слова будуть великими, і лише вони.

Результат

Однак не все так просто. Є деякі нюанси. Якщо звернути увагу на другий абзац вищенаведеного прикладу, можна помітити, що слово capitalize , незважаючи на застосоване до абзацу властивість text-transform зі значенням capitalize , відображається повністю з великих літер, що відповідає вихідному тексту. Пояснюється це тим, що з зазначеному значенні capitalize перевіряється лише перші літери слів, інші залишаються незмінними, незалежно від своїх початкового стану.
Незважаючи на зовнішню простоту, властивість text-transform може виявитися дуже корисною. Наприклад, для того, щоб зробити текст усіх заголовків H1 вашого сайту великим, достатньо лише додати до таблиці стилів одну властивість

H1 (text-transform: uppercase;)

і проблема буде вирішена. І не потрібно вручну змінювати всі заголовки, яких може бути дуже багато.

CSS великі літеридопомагають розбити монотонність однотипного дизайну, тексти якого виглядають однаково від початку остаточно.

Буквиці раніше і зараз

Літописці використовували великі літери в рукописах, які писалися від руки, деякі з них належать ще до V століття. Великі літери продовжували використовуватися з VIII по XV століття, коли друкарські верстати дозволили вивести друк на промисловий рівень. І рукописні, і друковані буквиці розміщувалися на початку тексту. Часто їх прикрашали декоративним малюнком, що розташовувався довкола літери.

Підняті та опущені літери досі використовуються у наші дні. Їх можна зустріти в газетах, журналах та книгах, а також у цифровій друкарні. Підняті літери іноді називаються витягнутими. Вони розміщуються на одному рівні з нижньою частиною тексту, який слідує за ними. Опущені літери розміщуються на одному рівні з верхньою частиною тексту, іноді в шарі за основною частиною текстового контенту, або решта тексту обтікає їх.

Підняті літери задаються набагато простіше, тому вони знаходяться на одному рівні з рештою тексту, і зазвичай для цього не потрібно змінювати обтікання зовнішніх полів. Опущені літери вимагають більше тонкого налаштування. Вам буде простіше розібратися з цим, якщо спочатку ви зрозумієте, як обробляються підняті літери.

Використання класів

Дизайнери, які вже мають уявлення про CSS, знають, що потрібно створити окремий клас CSS для першої літери великої.

Код CSS для елемента абзацу та класу, що створює букву, буде виглядати так:

p ( font-size:20px; font-family: Georgia, "Times New Roman", Times, serif;) .myinitialcaps (font-size:48px; font-family: Didot;)

А HTML-код виглядатиме так:

Що дає нам:

Здається, дуже просто? Насправді вам доведеться вносити корективи в залежності від конкретних піднятих літер, так як кожна велика літера вимагає спеціального кернінгу. Після вибору шрифту для піднятих літер та для основного тексту потрібно створювати окремі класи для кожної піднятої літери. У наведеному нижче CSS-класі.myinitialcapsiполе праворуч має негативне значення, щоб зменшити відстань між I та n .

Myinitialcapsi (font-size:48px; font-family: Didot; margin-right:-1px;)

I n this case, there's some extra space між “I” і “n.”

I ncluding a new class with negative margin pulls it closer.

Залежно від роздільної здатності екрана у наведеному вище прикладі I і n можуть виглядати так, ніби вони злилися разом. Це відбувається через засічки на кінцях букв. Тому, перш ніж вибирати остаточний варіант стилів CSS, протестуйте сайт на різних пристроях, щоб переглянути, як на них виглядає текст великими літерами CSS .

Цитати та інші окремі випадки

Можна збільшити не лише літери на початку тексту. Ви можете реалізувати ще один клас, щоб створити збільшену версію лапок, які виводитимуться поруч із літерою. У нашому випадку для лапок не підходить ні клас літери розміром 48, ні клас тексту в 20 пікселів. Скоріше це буде щось середнє — 30 пікселів. Лапки ми посунемо вниз на 4 пікселі, щоб оптично вирівняти їх з I :

Myinitialcapsq (font-size:30px; font-family: Didot; float:left; margin-top:4px;)

“I ncluding” у новому класі з negative margin pulls it closer.

Потрібно дуже уважно задавати кожну з CSS великих букв разом з лапками, щоб їх кернінг і вирівнювання відповідали навколишньому розмітці. Наприклад, букву Т потрібно буде змістити ліворуч, трохи за край абзацу, щоб її поперечна лінія візуально вписувалася в макет. Аналогічно потрібно буде вчинити і з круглими літерами, такими як C, G, O та Q. У цьому прикладі використані розміри шрифтів 20, 30 та 48. Але вам потрібно буде підібрати розміри, виходячи зі специфіки вибраних шрифтів. А також розмірів та дозволів екранів, на яких переглядатиметься сайт.

Псевдоелементи та псевдокласи

За допомогою псевдоелемента CSS можна легко створити підняту літеру, додавши ::first-letter елемент абзацу. Використовуйте :first-letter ( з однією двокрапкою) для застарілих браузерів:

p ( font-size: 1.2em; font-family: Georgia, "Times New Roman", Times, serif; line-height:2em;padding-bottom:1.2em;) p::first-letter ( font-size: 3.6em;text-transform: uppercase; font-family: "Monotype Bernard Condensed", serif; margin-right:0.03em;) .initialb (margin-right:-0.1em;) em;)

HTML-код , який містить класи CSS , що враховують кернінг літер N і B , виглядатиме таким чином.

An inital letter, with the first letter being a capital letter.
With line break, the next line не є initial cap.

nКнига в HTML source how the first letter, no capital letter in the HTML, gets sized to the initial cap size of 3.6em. Neat, huh?

B ut with a hard return, and a new paragraph started, another initial cap always gets created. You might be asking yourself, How am I going to account for this? Чи я маю на увазі нову шапку під час початку нового параграфа? Well, ви could. Але, якщо ви думаєте, що це, і хто це абсолютно повинен мати на увазі, що?

У букву перетворюється перша велика буква абзацу.
Перша літера після розриву рядка не буде перетворюватися на заголовок.

оЗверніть увагу, що у вихідному коді HTML перша літера не є великою, але вона перетворюється на літеру розміром 3.6em.

ПроОднак і після примусового розриву рядка, і на початку кожного нового абзацу завжди створюється буква. Ви можете запитати себе: Як мені це враховувати? Чи потрібно мені додавати букви для всіх цих випадків?Що ж, ви можете. Але чи це потрібно?

Навіть з урахуванням переваг, які надають псевдоелементи, нам довелося додати багато коду, щоб визначити окремі класи для обробки проблем, пов'язаних із кернінгом та відступами. Але цей метод перетворює першу літеру кожного нового абзацу в CSS велику літеру. Для когось він може не підійти, тому що не потрібно перетворити першу букву кожного абзацу.

Об'єднання псевдокласів та псевдоелементів для створення смарт-макета

Додавання псевдокласу: first-child допомагає вирішити проблему непотрібного перетворення перших букв:

p ( font-size: 1.2em; font-family: Georgia, "Times New Roman", Times, serif; line-height:2em;padding-bottom:0.5em;) p:first-child::first-letter ( font-size: 3.6em; text-transform: uppercase; font-family: "Monotype Bernard Condensed", serif; margin-right:0.03em;)

Об'єднавши цей код з HTML:

Перша буква, яка визначена як first-child - це єдина буква, яка перетворюється на підняту буквицю при цьому методі.

Оскільки перетворюється лише буква, визначена як first-child, зверніть увагу, що це приклад відрізняється від попереднього, без first-child. Крім цього, ми не перетворимо перші літери після початку абзацу і після примусового розриву рядка. Це виглядає більш елегантно порівняно з тим, як виглядав макет, коли ми перетворили всі перші літери абзаців.

Перевага використання псевдокласів полягає у можливості обробляти різні окремі випадки. А що щодо недоліків? Існує багато різних псевдокласів, і їх можна поєднати такою кількістю способів, що від цього може піти навкруги голова. Наприклад, псевдокласи :first-child та :first-of-type можуть давати однакові результати. Також можна застосувати псевдоклас не лише до абзацу, а й до елементів