CSS: заглавные буквы | CSS

0 ∞

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-код будет выглядеть так:

<p><span>M</span>y initial cap is much bigger here and set in the Didot typeface.</p>

Что дает нам:

Кажется, слишком просто? На самом деле вам придется вносить коррективы в зависимости от конкретных поднятых букв, так как каждая заглавная литера требует специального кернинга. После выбора шрифта для поднятых букв и для основного текста, нужно создавать отдельные классы для каждой поднятой литеры. В приведенном ниже CSS-классе .myinitialcapsi поле справа имеет отрицательное значение, чтобы уменьшить расстояние между I и n.

.myinitialcapsi {font-size:48px; font-family: Didot; margin-right:-1px;}
<p><span>I</span>n this case, there&rsquo;s some extra space between the &ldquo;I&rdquo; and &ldquo;n.&rdquo;</p> <p><span>I</span>ncluding a new class with a negative margin pulls it closer.</p>

В зависимости от разрешения экрана в приведенном выше примере I и n могут выглядеть так, будто они слились вместе. Это происходит из-за засечек на концах букв. Поэтому, прежде чем выбирать окончательный вариант стилей CSS, протестируйте сайт на различных устройствах, чтобы посмотреть, как на них выглядит текст заглавными буквами CSS.

Можно увеличить не только буквы в начале текста. Вы можете реализовать еще один класс, чтобы создать увеличенную версию кавычек, которые будут выводиться рядом с буквой. В нашем случае для кавычек не подходит ни класс буквы с размером 48, ни класс текста в 20 пикселей. Скорее, это будет что-то среднее — 30 пикселей. Кавычки мы подвинем вниз на 4 пикселя, чтобы оптически выровнять их с I:

.myinitialcapsq {font-size:30px; font-family: Didot; float:left; margin-top:4px;}
<p><span>&ldquo;</span><span>I</span>ncluding&rdquo; a new class with a negative margin pulls it closer.</p>

Нужно очень внимательно задавать каждую из 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;}
.initialn {margin-right:-0.15em;}

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

<p>An inital letter, with the first letter being a capital letter.<br>
With a line break, the next line has no initial cap.</p>
<p><span>n</span>otice in the HTML source how the first letter, not a capital letter in the HTML, gets sized to the initial cap size of 3.6em. Neat, huh?</p>
<p><span>B</span>ut with a hard return, and a new paragraph started, another initial cap always gets created. You might be asking yourself, <em>How am I going to account for this? Am I supposed to have an initial cap at the beginning of very new paragraph?</em> Well, you could. But, do you want it to look that way, and does it absolutely have to look that way?</p>
<p>В букву преобразовывается первая заглавная буква абзаца.<br>
Первая буква после разрыва строки не будет преобразовываться в заглавную.</p>
<p><span>о</span>Обратите внимание, что в исходном коде HTML первая буква не является заглавной, но она преобразуется в литеру с размером 3.
 
 
 6em.</p>
<p><span>О</span>Однако и после принудительного разрыва строки, ив  начале каждого нового абзаца всегда создается буква. Вы можете спросить себя: <em>Как мне учитывать это? Нужно ли мне добавлять буквы для всех этих случаев?</em> Что ж, вы можете. Но необходимо ли это?</p>

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

<p>Первая буква, которая определена, как first-child - это единственная буква которая преобразуется в поднятую буквицу при этом методе.</p>
<p>Так как преобразовывается только буква, определенная как first-child, обратите внимание, что этот пример отличается от предыдущего, без first-child.  Кроме этого мы не преобразуем первые буквы после начала абзаца и после принудительного разрыва строки. Это выглядит более элегантно, по сравнению с тем, как выглядел макет, когда мы преобразовали все первые буквы абзацев.</p>

Преимущество использования псевдоклассов заключается в возможности обрабатывать различные частные случаи. А что насчет недостатков? Существует много различных псевдоклассов, и их можно объединить таким количеством способов, что от этого может пойти кругом голова. Например, псевдоклассы :first-child и :first-of-type могут давать одинаковые результаты. Также можно применить псевдокласс не только к абзацу, но и к элементам <section> или <div>.

Например, как показано в приведенном ниже примере с поднятым буквами в шрифте Didot. Обратите внимание, как атрибут margin был добавлен справа от буквы А. Иначе она «склеилась» бы с буквой s в начале раздела:

section { font-size: 1.2em; font-family: Georgia, "Times New Roman", Times, serif; line-height:3em;}
section>p:first-child:first-letter { font-size: 4em; text-transform: uppercase; font-family:Didot, serif; margin-right:5px;}

И вместе с HTML:

<section>
<p>В начале раздела для первой буквы задается поднятая буквица.</p>
<p>И новый абзац…</p>
</section>

Если вы чувствуете тягу к экспериментам, то можете исследовать различные методы в дополнение к :first-child и :first-of-type. Например, такие как :nth-of-type или :nth-of-child, чтобы посмотреть, как те или другие типы псевдоклассов можно использовать для текста заглавными буквами CSS. Независимо от того, будете ли вы следовать изложенным в этой статье принципам или начнете копать глубже, когда вы научитесь работать с псевдоклассами CSS first-child, :first-of-type и :first-letter, вы сможете правильно применять их к элементам HTML.

Использование отдельных классов вместе с псевдоклассами для обработки различных букв — это процесс проб и ошибок, вычислений положительных и отрицательных отступов. И это требует большого терпения. Для таких букв, как F, G, O, P, Q, T, W, V и Y также потребуются отдельные классы кернинга.

Но самое интересное начинается тогда, когда вы на практике начинаете тестировать различные сочетания шрифтов и создавать поднятые буквы, которые будут привлекать внимание ваших читателей и выделять ваш сайт из общей массы.

Вадим Дворниковавтор-переводчик статьи «Making Initial Letters Part I: Raised Initials»

Дайте знать, что вы думаете по этой теме материала в комментариях. За комментарии, дизлайки, подписки, отклики, лайки низкий вам поклон!

Text-transform в CSS • Vertex Academy

Vertex Academy text-transform css,сделать буквы заглавными css,сделать буквы маленькими css,сделать первые буквы заглавными css

  • Данная статья написана командой Vertex Academy.
  • Это одна из статей из нашего Самоучителя по HTML&CSS.
  • Надеемся, что данная статья Вам будет полезна. Приятного прочтения!

Привет! В этой статье мы продолжим говорить об изменениях шрифтов с помощью CSS, а именно поговорим о том, как работает свойство text-transform.

Можно заметить, что часто заголовки пишутся прописными буквами. А в английском языке в названиях (например, книг, сериалов и пр.) первые буквы всех слов прописные:

  • General Electric
  • Game of Thrones
  • Microsoft Office

Или, например, у Вас может возникнуть необходимость отобразить часть текста прописными буквами, а часть большими буквами.

Для примера возьмем параграф из Википедии:

Слово компьютер является производным от английских слов to compute, computer, которые переводятся как «вычислять», «вычислитель» (английское слово, в свою очередь, происходит от латинского computāre — «вычислять»). ПЕРВОНАЧАЛЬНО В АНГЛИЙСКОМ ЯЗЫКЕ ЭТО СЛОВО ОЗНАЧАЛО ЧЕЛОВЕКА, ПРОИЗВОДЯЩЕГО АРИФМЕТИЧЕСКИЕ ВЫЧИСЛЕНИЯ С ПРИВЛЕЧЕНИЕМ ИЛИ БЕЗ ПРИВЛЕЧЕНИЯ МЕХАНИЧЕСКИХ УСТРОЙСТВ. В дальнейшем его значение было перенесено на сами машины, однако современные компьютеры выполняют множество задач, не связанных напрямую с математикой.

Именно для того, чтобы поменять регистр текста (из прописных в заглавные, из заглавных в прописные) и используется свойство text-transform.

  • text-tranform: capitalize (Первая Буква Каждого Слова Будет Большой)
  • text-tranform: lowercase (все буквы будут маленькими)
  • text-transform: uppercase (ВСЕ БУКВЫ БУДУТ БОЛЬШИМИ)
  • text-transform: none (отменяет предыдущие форматирование)
  • text-tranform: inherit (наследует форматирование родителя)

Рассмотрим как это работает на практике. Представим, что у нас есть следующая HTML-страница:

<!DOCTYPE html> <html> <head> <meta charset = «utf-8″> <title>My Page</title> <link rel=»stylesheet» href=»style. css»> </head> <body> <p>A paragraph with some TEXT</p> </body> </html>

1

2

3

4

5

6

7

8

9

10

11

<!DOCTYPE html>

<html>

<head>

    <meta charset = «utf-8»>

    <title>My Page</title>

    <link rel=»stylesheet» href=»style.css»>

</head>

<body>

    <p>A paragraph with some TEXT</p>

</body>

</html>

Как видите, стили у нас подключены отдельным файлом style.css

Итак, пока никаких CSS-стилей мы не задали, текст в теге <p> будет выглядеть так:

ПРИМЕР 1

Чтоб сделать весь текст в теге <p> заглавными буквами, напишите в файле style.css следующее:

p { text-transform: uppercase; }

p {

    text-transform: uppercase;

}

Получим:

ПРИМЕР 2

Чтоб сделать все буквы прописными, напишите следующее:

p { text-transform: lowercase; }

p {

    text-transform: lowercase;

}

Получим:

ПРИМЕР 3

Чтобы сделать все первые буквы заглавными, напишите:

p { text-transform: capitalize; }

p {

    text-transform: capitalize;

}

Получим:

Обратите внимание: слово, написанное полностью заглавными буквами, не изменилось.

ПРИМЕР 4

Теперь протестируем text-transorm: none.

Но в таком виде его тестировать не интересно. Давайте представим, что у нас еще есть h2:

<!DOCTYPE html> <html> <head> <meta charset = «utf-8″> <title>My Page</title> <link rel=»stylesheet» href=»style.css»> </head> <body> <h2>Heading</h2> <p>A paragraph with some TEXT</p> </body> </html>

1

2

3

4

5

6

7

8

9

10

11

12

<!DOCTYPE html>

<html>

<head>

    <meta charset = «utf-8»>

    <title>My Page</title>

    <link rel=»stylesheet» href=»style.css»>

</head>

<body>

    <h2>Heading</h2>

    <p>A paragraph with some TEXT</p>

</body>

</html>

Поменяем и файл со стилями. Давайте зададим text-transform: uppercase для всего body:

body { text-transform: uppercase; }

body {

    text-transform: uppercase;

}

В итоге получим:

Но что если мы не хотим, чтобы текст параграфа <p> не менялся? Пишем:

body { text-transform: uppercase; } p { text-transform: none; }

1

2

3

4

5

6

7

body {

    text-transform: uppercase;

}

 

p {

    text-transform: none;

}

Получаем:

ПРИМЕР 5

А теперь представим, что у нас есть несколько параграфов:

<!DOCTYPE html> <html> <head> <meta charset = «utf-8″> <title>My Page</title> <link rel=»stylesheet» type=»text/css» href=»style. css»> </head> <body> <p>A paragraph with some TEXT</p> <p>A paragraph with some TEXT</p> <p>A paragraph with some TEXT</p> </body> </html>

1

2

3

4

5

6

7

8

9

10

11

12

13

<!DOCTYPE html>

<html>

<head>

    <meta charset = «utf-8»>

    <title>My Page</title>

    <link rel=»stylesheet» type=»text/css» href=»style.css»>

</head>

<body>

    <p>A paragraph with some TEXT</p>

    <p>A paragraph with some TEXT</p>

    <p>A paragraph with some TEXT</p>

</body>

</html>

Допустим, для родительского тега body у нас задан один стиль, а для самих параграфов — другой:

body { text-transform: uppercase; } p { text-transform: none; }

1

2

3

4

5

6

7

body {

    text-transform: uppercase;

}

 

p {

    text-transform: none;

}

В итоге сейчас это выглядит так:

Но что если мы хотим, чтобы один из параграфов имел стиль родителя? Например, мы хотим его выделить таким образом?

Давайте сделаем следующее — допишем ему text-transform: inherit:

<!DOCTYPE html> <html> <head> <meta charset = «utf-8″> <title>My Page</title> <link rel=»stylesheet» type=»text/css» href=»style. css»> </head> <body> <p>A paragraph with some TEXT</p> <p>A paragraph with some TEXT</p> <p>A paragraph with some TEXT</p> </body> </html>

1

2

3

4

5

6

7

8

9

10

11

12

13

<!DOCTYPE html>

<html>

<head>

    <meta charset = «utf-8»>

    <title>My Page</title>

    <link rel=»stylesheet» type=»text/css» href=»style.css»>

</head>

<body>

    <p>A paragraph with some TEXT</p>

    <p>A paragraph with some TEXT</p>

    <p>A paragraph with some TEXT</p>

</body>

</html>

Получим:

ИТОГО: 

  • Хотите, чтобы текст отображался ЗАГЛАВНЫМИ БУКВАМИ — используйте:

text-transform: uppercase;

text-transform: uppercase;
  • Хотите, чтобы текст отображался прописными буквами — используйте:

text-transform: lowercase;

text-transform: lowercase;
  • Хотите, чтобы Каждое Слово Было С Большой Буквы (чаще применяется в английском) — используйте:

text-transform: capitalize;

text-transform: capitalize;
  • Хотите отменить предыдущий стиль text-transform (заданный вами или кем-то другим) — используйте:

text-transform: none;

text-transform: none;
  • Хотите взять такой же text-transform как и у родительского элемента — используйте:

text-transform: inherit;

text-transform: inherit;

Надеемся, данная статья была Вам полезна! Читайте дальше наши статьи или приходите учиться к нам на курсы по Front-End. Детальнее о наших курсах у нас на сайте здесь.


заглавные буквы — использовать первую букву предложения с заглавной буквы CSS

спросил

Изменено 5 лет, 2 месяца назад

Просмотрено 91к раз

Я хочу сделать заглавной первую букву предложения, а также первую букву после запятой, если это возможно. Я хочу добавить сюда код:

 .qcont {
    ширина: 550 пикселей;
    высота: авто;
    поплавок: справа;
    переполнение: скрыто;
    положение: родственник;
}
  • css
  • капитализация

1

Вы можете сделать первую букву элемента .qcont прописной, используя псевдоэлемент :first-letter .

 .qcont:первая буква{
  преобразование текста: капитализировать
}

Это самое близкое, что вы получите, используя только css. Вы можете использовать javascript (в сочетании с jQuery), чтобы обернуть каждую букву, которая идет после точки (или запятой, как вы хотите) в диапазон . Вы можете добавить тот же CSS, что и выше, к этому диапазону . Или сделать это в javascript все вместе.

Вот фрагмент для подхода css:

 .qcont:first-letter {
  преобразование текста: капитализировать
} 
 
слово, другое слово

4

Это невозможно сделать в CSS. Свойство text-transform не делает различий в зависимости от размещения слова внутри содержимого, и нет псевдоэлемента для выбора первого слова предложения. Вам нужно будет иметь реальные элементы в разметке для каждого предложения. Но если вы можете это сделать, то, вероятно, вы могли бы точно так же изменить начальные буквы на заглавные в самом содержании.

Использование заглавных букв в начале предложения зависит от орфографии и должно выполняться при создании контента, а не с дополнительными стилистическими предложениями (CSS) или сценариями на стороне клиента. Процесс распознавания границ предложений далеко не тривиален и вообще не может осуществляться автоматически без сложного синтаксического и семантического анализа (например, аббревиатура, оканчивающаяся точкой, может стоять внутри предложения или в конце предложения).

2

Если вам нужно сделать первую букву в контейнере contenteditable заглавной, вы не можете использовать свойство css

 #myContentEditableDiv:first-letter {
    преобразование текста: использовать заглавные буквы;
}

, потому что при попытке удалить письмо автоматически вы удалите весь текст, содержащийся в contenteditable.

Вместо этого попробуйте пример, предоставленный sakhunzai в https://stackoverflow.com/a/7242079/6411398. для рабочего решения.

0

text-transform:capitalize; будет заглавной первой буквой предложения , но если вы хотите также сделать это для запятых, вам придется написать некоторый javascript. Однако я согласен с @BoltClock. С какой стати вы хотите использовать заглавную букву после запятой?

Редактировать: Ради читателей: text-transform:capitalize; будет использовать заглавные буквы в каждом слове предложения , а не только в первом. Вы должны использовать :first-letter Селектор CSS с указанным выше.

6

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя адрес электронной почты и пароль

Опубликовать как гость

Электронная почта

Требуется, но никогда не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

преобразование текста | CSS-трюки — CSS-трюки

DigitalOcean предоставляет облачные продукты для каждого этапа вашего путешествия. Начните с бесплатного кредита в размере 200 долларов США!

Свойство text-transform в CSS управляет регистром и регистром текста.

 .нижний регистр {
  преобразование текста: нижний регистр;
  }

Text-Transform Values ​​

  • нижний регистр переводит все буквы выделенного текста в нижний регистр.
  • верхний регистр делает все буквы в выделенном тексте прописными.
  • сделать заглавными делает первую букву каждого слова в выделенном тексте заглавной.
  • нет оставляет регистр текста и заглавные буквы такими же, как они были введены.
  • наследовать дает тексту регистр и заглавные буквы его родителя.

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

См. перо 0f4293fce0d14aafc3818c950ab0ded3 автора mariemosley (@mariemosley) на CodePen.

Точки интереса

Заглавная буква будет заглавной буквой записывать слова, которые появляются в одинарных или двойных кавычках, а также первую букву после дефиса. Первая буква после числа не будет заглавной, поэтому такие даты, как «4 февраля 2015 г.», не будут преобразованы в «4 февраля 2015 г.».

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

CSS не поддерживает «заголовок» — стиль заглавных букв, используемый в названиях книг, фильмов, песен и стихов, где артикли пишутся строчными буквами (как в «В поисках утраченного ковчега»). Но есть решения JavaScript для регистра заголовков, в том числе toTitleCase() Дэвида Гоуча.

Связанные свойства

  • вариант шрифта
  • отступ текста
  • :: первая буква
  • ::первая строка

Дополнительная информация

  • преобразование текста в MDN
  • text-transform в W3C Spec
  • Примечания о доступности текста в верхнем регистре из WebAIM

Поддержка браузера

Chrome Сафари Firefox Опера ИЭ Андроид iOS
Любой Любой Любой Любой Любой Любой Любой

Firefox поддерживает правила использования заглавных букв для тюркских, немецкого, голландского и греческого языков, которые не поддерживаются другими браузерами. Firefox также является единственным браузером, поддерживающим text-transform: full-width; , который может помочь улучшить читаемость текста, содержащего смесь латинских и восточноазиатских шрифтов.

No related posts.