Continuing with typography features, we now enter the word and paragraph properties.
Let's get going.
The
hyphens CSS property tells the browser how to handle hyphenation when text lines wrap, and it looks like this:
hyphens: auto;
We can control when to hyphenate and whether to allow it or let it happen under certain conditions.
Hyphenation is language dependent. The language in a document is defined by the lang attribute; browsers will hyphenate if they support the language and a proper hyphenation dictionary is available. Each browser supports hyphenation differently.
This property supports three keyword values: none, manual, and auto.
none: Text lines are not broken at line breaks even if there are characters suggesting where a line break should be introduced. Lines will only break on whitespace.manual: Text lines are broken at line breaks where there are characters that suggest a line break.auto: The browser makes the decision to introduce line breaks as it seem necessary. It bases its decisions on either the presence of hyphenation characters or by language-specific information.
There are two Unicode characters that we can use to manually set a potential line break in the text:
U+2010 (HYPHEN)
This character is called a hard hyphen. It's an actual hyphen "-" and it's visible in the text. The browser may or may not break the line on that specific character.
U+00AD (SHY)
This character is called a soft hyphen. Although it is present in the markup, it is not rendered in the text. However, the browser sees this character and, if it can use it to create a line break, it will. To insert a soft hyphen, we use ­.
CSS:
.element {
hyphens: auto;
}The
word-break CSS property is used to specify whether line breaks should happen within words instead of breaking the lines on a hyphen or a space between words, and it looks like this:
word-break: break-all;
The word-break property is very helpful in situations where a long string, such as a URL, is wider than its parent container, thus disrupting the layout or bleeding off the side. Applying the word-break property makes the URL break somewhere along the string.
This property supports three keyword values: normal, break-all, and keep-all.
The
word-spacing CSS property controls the space between words, and it looks like this:
word-spacing: .2em;
It supports the following values: a normal value, a length value and a percentage value.
This is the default value. It's defined by the current font or the browser itself, and it resets to the default spacing.
The
word-wrap CSS property allows long words to break at an arbitrary point if there are no suggested break points in the long word in question, and it looks like this:
empty-cells: hide;
The
line-height CSS property defines the distance between lines of text. In typography, the line height is called leading.
It supports the following values: a normal value, a number value, a length value, and a percentage value.
normal: This is the default value. The line height is defined by the browser.Number value: This is a number without any unit. This is the recommended method. The reason a unitless value is recommended is because this value can cascade into child elements. Child elements can then scale their line height based on their font size.Length value: We use one of the following units when we use the length value:px,em,in,mm,cm,vw, and so on. We can use decimals as well.Percentage value: For the percentage value, we use percentages like50%,85%, and so on.
CSS:
.element {
line-height: 1.6;
}Let's understand the term orphans first. Orphans are the lines of a paragraph left in the previous page when a block of text is split over two pages. In the Web world, this is seen in text that spans several columns, where the first line of a paragraph is left on the previous column.
From an editorial standpoint, this is very bad. The recommended treatment of orphans is to leave at least three lines on the previous page or column. The more lines, the better.
The orphans CSS property controls the number of lines left on the previous page, and it looks like this:
orphans: 3;
This property is very useful in print stylesheets, but it can also work when using CSS columns.
It supports a numeric value without a unit. This numeric value defines the number of lines left on the previous page or column.
CSS:
/*Print stylesheet*/
@media print {
.element {
orphans: 3;
}
}
/*Screen stylesheet*/
.element {
orphans: 4;
}The quotes CSS property controls the types of quotation marks to use, and it looks like this:
quotes: """ """ "'" "'";
Quotation marks are added via the :before and :after pseudo-elements.
The simplest way to add quotation marks is to let the browser do it using the content property and the open-quote and close-quote values: content: open-quote; and content: close-quote;.
We can also declare the types of quotes we want to use and not let the browser decide. We'll see this in the following CSS example.
Quotes always start and end with a double-character symbol, either " " or, for example, « » in French. But, if there's a nested quote, this nested quote uses a single-character symbol, either ' ' or, for example, ‹ › in French.
This property supports two values: none and a [string string] value.
Each string represents a pair of quotes. The first string represents the outer level quotation marks and the second string represents the nested level quotation marks.
The + sign means that we can add deeper levels of nested quotation marks, but it's not really necessary, two levels should work for most cases.
Taking into account these considerations, we can then create the following quotation marks with the quotes property:
CSS:/*Quotation marks inserted by the browser " " and ' '*/
p:before { content: open-quote; }
p:after { content: close-quote; }
/*Custom declared quotation marks*/
p { quotes: """ """ "'" "'"; }
/*French quotation marks*/
p { quotes: "«" "»" "‹" "›"; } Let's clarify the term widows first. Widows are the lines of a paragraph that appear on the next page when a block of text is split over two pages. In the Web world, this is seen in text that spans several columns, where the last line of a paragraph appears on the next column.
From an editorial standpoint, this is very bad. The recommended treatment of widows is to leave at least three lines on the next page or column. The more lines, the better.
The widows CSS property controls the number of lines that will appear on the next page, and it looks like this:
widows: 3;
The widows property is very useful in print stylesheets, but it can also work when using CSS columns.
It supports a numeric value without a unit. This numeric value defines the amount of lines that will appear on the next page or column.
CSS:
/*Print stylesheet*/
@media print {
.element {
widows: 3;
}
}
/*Screen stylesheet*/
.element {
widows: 4;
}The
writing-mode CSS property defines the direction in which lines of text or even block-level elements are laid out, either vertically or horizontally, and it looks like this:
writing-mode: vertical-rl;
This property supports three keyword values: horizontal-tb, vertical-rl, and vertical-lr.
This means vertical, from right to left. The content is turned 90 degrees and flows vertically.
To understand this better, think of this: tilt your head to the right shoulder, at this point, you will be able to read the text flow from top (which was to the right before tilting your head) to bottom (which was to the left before tilting your head).
This means vertical, from left to right. The content is turned 90 degrees and flows vertically.
However, unlike vertical-rl, when you tilt your head over your right shoulder, the content flows from bottom (which was to the left before tilting your head) to top (which was to the right before tilting your head), and the text lines are inverted.
CSS:
.element {
writing-mode: vertical-rl;
}The
letter-spacing CSS property defines the space between the characters in a line of text, and it looks like this:
letter-spacing: 5px;
The
white-space CSS property defines how the whitespace inside an element is going to be treated, and it looks like this:
white-space: pre-wrap;
This property supports five keyword values: normal, nowrap, pre, pre-wrap, and pre-line.
This is the default value. If we have two or more spaces together, they will collapse into a single space. This is the normal behavior of HTML documents. It will wrap the text where necessary.
Multiple spaces will collapse into a single space, and the line will never wrap except if there's a <br> tag in the markup.
It's the same as the HTML element <pre>, which means preformatted. This value will honor all spaces in the text, but will not wrap it unless there's a <br> tag in the markup, just like nowrap does. This value is great to display short chunks of code.
The tab-size CSS property allows us to define the number of spaces the tab character can have.
As we saw in the prior white-space property description, multiple spaces are collapsed into a single space by default. Therefore, this property will only work on elements that are inside a <pre> tag or, have one of the white-space properties that honor multiple spaces, pre and pre-wrap.
This property is great for displaying code.
The default number of spaces the tab character has is 8. But we, web designers and developers, are picky and like either four spaces or sometimes two. With the tab-size property, we can modify that default value to anything we want.