Text-transform

Examples

<p>Initial String
  <strong>
<p>text-transform: none
  <strong><span></span></strong>
</p>
span {
  text-transform: none;
}
strong { float: right; }

This demonstrates no text transformation.

(General)

<p>Initial String
  <strong>
<p>text-transform: capitalize
<span></span>
</p>
span {
  text-transform: capitalize;
}
strong { float: right; }

This demonstrates text capitalization.

(Punctuation)

<p>Initial String
  <strong>
<p>text-transform: capitalize
  <span></span>
</p>
span {
  text-transform: capitalize;
}
strong { float: right; }

This demostrates how initial punctuations of a word are ignored. The keyword target the first letter, that is the first Unicode character part of the Letter or Number general category.

(Symbols)

<p>Initial String
  <strong>
<p>text-transform: capitalize
  <span></span>
</p>
span {
  text-transform: capitalize;
}
strong { float: right; }

This demonstrates how initial symbols are ignored. The keyword target the first letter, that is the first Unicode character part of the Letter or Number general category.

(Dutch ij digraph)

<p>Initial String
  <strong lang="nl">
<p>text-transform: capitalize
  <span lang="nl"></span>
</p>
span {
  text-transform: capitalize;
}
strong { float: right; }

This demonstrates how the Dutch ij digraph must be handled like one single letter.

(General)

<p>Initial String
  <strong>
<p>text-transform: uppercase
  <span></span>
</p>
span {
  text-transform: uppercase;
}
strong { float: right; }

This demonstrates transforming the text to uppercase.

(Greek Vowels)

<p>Initial String
  <strong>
<p>text-transform: uppercase
  <span></span>
</p>
span {
  text-transform: uppercase;
}
strong { float: right; }

This demonstrates how Greek vowels except disjunctive eta should have no accent, and the accent on the first vowel of a vowel pair becomes a diaeresis on the second vowel.

(General)

<p>Initial String
  <strong>
<p>text-transform: lowercase
  <span></span>
</p>
span {
  text-transform: lowercase;
}
strong { float: right; }

This demonstrates transforming the text to lowercase.

(Greek Σ)

<p>Initial String
  <strong>
<p>text-transform: lowercase
  <span></span>
</p>
span {
  text-transform: lowercase;
}
strong { float: right; }

This demonstrates how the Greek character sigma () is transformed into the regular lowercase sigma () or the word-final variant (), according the context.

(General)

<p>Initial String
  <strong>0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>?@{|}~
<p>text-transform: full-width
  <span>0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>?@{|}~</span>
</p>
span {
  text-transform: full-width;
}
strong { width: 100%; float: right; }

Some characters exists in two formats, normal width and a full-width, with different Unicode code points. The full-width version is used to mix them smoothly with Asian ideographic characters.

CSS Reference

CSS ReferenceCSS Browser SupportCSS SelectorsCSS FunctionsCSS Reference AuralCSS Web Safe FontsCSS Font FallbacksCSS AnimatableCSS UnitsCSS PX-EM ConverterCSS ColorsCSS Color ValuesCSS Default ValuesCSS Entities

CSS Properties

align-content
align-items
align-self
all
animation
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timing-function

backface-visibility
background
background-attachment
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-image
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
bottom
box-decoration-break
box-shadow
box-sizing
break-after
break-before
break-inside

caption-side
caret-color
@charset
clear
clip
clip-path
color
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
content
counter-increment
counter-reset
cursor

direction
display
empty-cells
filter
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
float
font
@font-face
font-family
font-feature-settings
font-kerning
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-variant-caps
font-weight

gap
grid
grid-area
grid-auto-columns
grid-auto-flow
grid-auto-rows
grid-column
grid-column-end
grid-column-gap
grid-column-start
grid-gap
grid-row
grid-row-end
grid-row-gap
grid-row-start
grid-template
grid-template-areas
grid-template-columns
grid-template-rows

hanging-punctuation
height
hyphens
@import
isolation
justify-content
@keyframes
left
letter-spacing

line-height
list-style
list-style-image
list-style-position
list-style-type

margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
@media
min-height
min-width
mix-blend-mode

object-fit
object-position
opacity
order
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-x
overflow-y

padding
padding-bottom
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
perspective
perspective-origin
pointer-events
position
quotes

resize
right
row-gap

scroll-behavior

tab-size
table-layout
text-align
text-align-last
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-indent
text-justify
text-overflow
text-shadow
text-transform
top

transform
transform-origin
transform-style
transition
transition-delay
transition-duration
transition-property
transition-timing-function

unicode-bidi
user-select

vertical-align
visibility

white-space
width
word-break
word-spacing
word-wrap
writing-mode

z-index

CSS 2D Transform Methods

Function Description
matrix(n,n,n,n,n,n) Defines a 2D transformation, using a matrix of six values
translate(x,y) Defines a 2D translation, moving the element along the X- and the Y-axis
translateX(n) Defines a 2D translation, moving the element along the X-axis
translateY(n) Defines a 2D translation, moving the element along the Y-axis
scale(x,y) Defines a 2D scale transformation, changing the elements width and height
scaleX(n) Defines a 2D scale transformation, changing the element’s width
scaleY(n) Defines a 2D scale transformation, changing the element’s height
rotate(angle) Defines a 2D rotation, the angle is specified in the parameter
skew(x-angle,y-angle) Defines a 2D skew transformation along the X- and the Y-axis
skewX(angle) Defines a 2D skew transformation along the X-axis
skewY(angle) Defines a 2D skew transformation along the Y-axis

❮ Previous
Next ❯

Why is capitalization important?

Passwords

Passwords are case-sensitive to add an extra level of security. If your caps lock key is enabled while creating your password, but not when you log in the next day, you won’t be able to access your account.

File names, directories, and paths

When dealing with file names, directories, and paths in many operating systems and paths, they are case-sensitive. For example, in Microsoft Windows nothing is case-sensitive. However, when uploading a file to the Internet, the files and directories become case-sensitive. For example, the file name of this web page is «uppercase.htm» and must be typed in all lowercase in the URL while online. However, if you were viewing the file locally on a Windows computer, the capitalization would not matter.

Measurements

When dealing with computer measurements and other measurements, capitalization is important for identifying the exact type of measurement. For example, «Mb» (short for megabit) and «MB» (short for megabyte) are two different types of measurements with different values.

Commands

Command line commands in operating systems like Linux are case-sensitive, which means if you typed «Ls» to list file you would get an error since the ls command is all lowercase.

Programming functions

In earlier programming languages like FORTRAN, the keywords and the names of data objects needed to be uppercase because punch card machines did not have a Shift key.

Acronyms

To help differentiate an acronym from other words in a sentence, they are typed in uppercase. For example, the acronym RAM is typed in all uppercase to help identify the word as an acronym.

CSS Properties

align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidecaption-sidecaret-color@charsetclearclipclip-pathcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-feature-settingsfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-variant-capsfont-weightgapgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphens@importisolationjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-width@mediamin-heightmin-widthmix-blend-modeobject-fitobject-positionopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpointer-eventspositionquotesresizerightrow-gapscroll-behaviortab-sizetable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-indenttext-justifytext-overflowtext-shadowtext-transformtoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidiuser-selectvertical-alignvisibilitywhite-spacewidthword-breakword-spacingword-wrapwriting-modez-index

CSS Reference

CSS ReferenceCSS Browser SupportCSS SelectorsCSS FunctionsCSS Reference AuralCSS Web Safe FontsCSS Font FallbacksCSS AnimatableCSS UnitsCSS PX-EM ConverterCSS ColorsCSS Color ValuesCSS Default ValuesCSS Entities

CSS Properties

align-content
align-items
align-self
all
animation
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timing-function

backface-visibility
background
background-attachment
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-image
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
bottom
box-decoration-break
box-shadow
box-sizing
break-after
break-before
break-inside

caption-side
caret-color
@charset
clear
clip
clip-path
color
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
content
counter-increment
counter-reset
cursor

direction
display
empty-cells
filter
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
float
font
@font-face
font-family
font-feature-settings
font-kerning
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-variant-caps
font-weight

gap
grid
grid-area
grid-auto-columns
grid-auto-flow
grid-auto-rows
grid-column
grid-column-end
grid-column-gap
grid-column-start
grid-gap
grid-row
grid-row-end
grid-row-gap
grid-row-start
grid-template
grid-template-areas
grid-template-columns
grid-template-rows

hanging-punctuation
height
hyphens
@import
isolation
justify-content
@keyframes
left
letter-spacing

line-height
list-style
list-style-image
list-style-position
list-style-type

margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
@media
min-height
min-width
mix-blend-mode

object-fit
object-position
opacity
order
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-x
overflow-y

padding
padding-bottom
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
perspective
perspective-origin
pointer-events
position
quotes

resize
right
row-gap

scroll-behavior

tab-size
table-layout
text-align
text-align-last
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-indent
text-justify
text-overflow
text-shadow
text-transform
top

transform
transform-origin
transform-style
transition
transition-delay
transition-duration
transition-property
transition-timing-function

unicode-bidi
user-select

vertical-align
visibility

white-space
width
word-break
word-spacing
word-wrap
writing-mode

z-index

Интервал между словами и символами

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

Чтобы установить определенный интервал между символами необходимо использовать CSS свойство letter-spacing. При работе со свойством используйте относительные единицы измерения CSS (em, rem, px и так далее). Допускается использование как положительных, так и отрицательных значений. Положительные значения соответственно увеличивают интервал между символами, а отрицательные уменьшают, вплоть до наслоения букв и символов друг на друга.

Давайте рассмотрим пример использования свойства letter-spacing:

<!DOCTYPE html>
<html>
<head>
	<title>Пример использования свойства letter-spacing</title>
<style> 
.test {
letter-spacing : -1px; /* задаём отрицательный интервал между символами в тексте. */
}
.test2 {
letter-spacing : normal; /* задаём интервал между символами в тексте (значение по умолчанию). */
}
.test3 {
letter-spacing : 2px; /* задаём интервал между символами в тексте (2px). */
}
.test4 {
letter-spacing : 1em; /* задаём интервал между символами в тексте (1em). */
}
</style>
</head>
	<body>
		<div class = "test">letter-spacing: -1px</div>
		<div class = "test2">letter-spacing: normal</div>
		<div class = "test3">letter-spacing: 2px</div>
		<div class = "test4">letter-spacing: 1em</div>
	</body>
</html>

В данном примере мы рассмотрели способы указания интервала между символами в тексте в пикселях (как положительное, так и отрицательное значение) и единицах измерения em.

Результат нашего примера:


Рис.63 Пример использования свойства letter-spacing (интервал между символами в тексте).

Задать интервал между отдельными словами позволяет похожее по наименованию свойство CSS — word-spacing. По аналогии со свойством letter-spacing используйте относительные единицы измерения CSS (em, rem, px и так далее). Допускается использование как положительных, так и отрицательных значений. Положительные значения соответственно увеличивают интервал между словами, а отрицательные уменьшают, вплоть до наслоения слов друг на друга.

Давайте рассмотрим пример использования свойства word-spacing:

<!DOCTYPE html>
<html>
<head>
	<title>Пример использования свойства word-spacing</title>
<style> 
.test {
word-spacing : normal; /* определяем расстояние между словами (значение по умолчанию) */
}
.test2 {
word-spacing : 1em; /* определяем расстояние между словами (1em) */
}
.test3 {
word-spacing : -5px; /* определяем расстояние между словами (отрицательное значение) */
}
</style>
</head>
	<body>
		<p class = "test">Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю.</p>
		<p class = "test2">Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю.</p>
		<p class = "test3">Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю.</p>
	</body>
</html>

Результат нашего примера:


Рис. 64 Пример использования свойства word-spacing (интервал между словами в тексте).

Использование классов

Дизайнеры, которые уже имеют представление о 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 class="myinitialcaps">M</span>y initial cap is much bigger here and set in the Didot typeface.</p>

Что дает нам:

CSS-классе .myinitialcapsiIn

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

InCSSCSS

Трехмерное масштабирование элементов

Следующая функция, которую мы рассмотрим это функция scale3d(), она определяет трехмерное преобразование путем масштабирования элемента по оси X, по оси Y и по оси Z. Перейдем к примеру:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Трехмерное масштабирование элементов по осям</title>
<style>
.static {
display: inline-block; /* блочно-строчные элементы (выстраиваем элементы в линейку) */
margin: 10px; /* внешние отступы со всех сторон */
background: gray; /* цвет заднего фона */
}
div {
width: 180px; /* ширина элемента */
height: 100px; /* высота элемента */
line-height: 100px; /* высота строки (выраывниваем по вертикали) */
text-align: center; /* горизонтальное выравнивание текста по центру */
transition: 0.2s; /* переходный эффект составляет 200 миллисекунд (0,2 секунды) */
}
.test2, .test4, .test6 {background: orange;} /* цвет заднего фона */
.test, .test3, .test5 {background: plum;} /* цвет заднего фона */
.test:hover {
transform: perspective(500px) rotateX(45deg) scale3d(1,2,1); /* используем несколько функций преобразования для элемента при наведении (перспектива, поворот по оси X, трехмерное масштабирование) */
}
.test2:hover {
transform: perspective(500px) rotateX(45deg) scale3d(2,1,1); /* используем несколько функций преобразования для элемента при наведении (перспектива, поворот по оси X, трехмерное масштабирование) */
}
.test3:hover {
transform: perspective(500px) rotateX(45deg) scale3d(1,1,2); /* используем несколько функций преобразования для элемента при наведении (перспектива, поворот по оси X, трехмерное масштабирование) */
}
.test4:hover {
transform: perspective(500px) rotateX(45deg) scale3d(-1,-2,-1); /* используем несколько функций преобразования для элемента при наведении (перспектива, поворот по оси X, трехмерное масштабирование) */
}
.test5:hover {
transform: perspective(500px) rotateX(45deg) scale3d(0.5,1,1); /* используем несколько функций преобразования для элемента при наведении (перспектива, поворот по оси X, трехмерное масштабирование) */
}
.test6:hover {
transform: perspective(500px) rotateX(45deg) scale3d(0.5,0.5,2); /* используем несколько функций преобразования для элемента при наведении (перспектива, поворот по оси X, трехмерное масштабирование) */
}
</style>
</head>
	<body>
		<div class = "static"><div class = "test">scale3d(1,2,1)</div></div>
		<div class = "static"><div class = "test2">scale3d(2,1,1)</div></div>
		<div class = "static"><div class = "test3">scale3d(1,1,2)</div></div><br>
		<div class = "static"><div class = "test4">scale3d(-1,-2,-1)</div></div>
		<div class = "static"><div class = "test5">scale3d(0.5,1,1)</div></div>
		<div class = "static"><div class = "test6">scale3d(0.5,0.5,2)</div></div>
	</body>
</html>

В этом примере были использованы различные значения функции scale3d(), благодаря которой, мы масштабируем элемент сразу по трём осям.
Для демонстрации работы трехмерного масштабирования функцией scale3d(), мы добавили функцию rotateX(), которая поворачивает наш элемент по оси X и функцию преобразования perspective(), которая определяет перспективу обзора элемента, создавая для пользователя иллюзию глубины.

Результат нашего примера:

Рис. 180 Трехмерное масштабирование элементов по осям (функция преобразования элемента scale3d).

Цитаты и другие частные случаи

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

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

CSSCGOQ

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

С помощью псевдоэлемента 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, будет выглядеть следующим образом…


An inital letter, with the first letter being a capital letter.
With a line break, the next line has no initial cap.

notice 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?

But 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? Am I supposed to have an initial cap at the beginning of very new paragraph? Well, you could

But, do you want it to look that way, and does it absolutely have to look that way?

В букву преобразовывается первая заглавная буква абзаца.
Первая буква после разрыва строки не будет преобразовываться в заглавную.

оОбратите внимание, что в исходном коде HTML первая буква не является заглавной, но она преобразуется в литеру с размером 3.6em.

ООднако и после принудительного разрыва строки, ив начале каждого нового абзаца всегда создается буква. Вы можете спросить себя: Как мне учитывать это? Нужно ли мне добавлять буквы для всех этих случаев? Что ж, вы можете

Но необходимо ли это?

CSS

Буквицы раньше и сейчас

Летописцы использовали заглавные буквы в рукописях, которые писались от руки, некоторые из них относятся еще к V веку. Прописные буквы продолжали использоваться с VIII по XV век, когда типографские станки позволили вывести печать на промышленный уровень. И рукописные, и печатные буквицы размещались в начале текста. Часто их украшали декоративным рисунком, который располагался вокруг буквы.

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Adblock
detector