官术网_书友最值得收藏!

首頁 >

Web Developer's Reference Guide

Words and paragraphs

Continuing with typography features, we now enter the word and paragraph properties.

Let's get going.

hyphens

The hyphens CSS property tells the browser how to handle hyphenation when text lines wrap, and it looks like this:

hyphens: auto;
Description

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.

Tip

Ensure that the lang attribute is declared either globally on the <html> tag or on the specific element whose content should be hyphenated.

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.
Unicode characters to suggest line break opportunities

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 &shy;.

CSS:

.element {
  hyphens: auto;
}

word-break

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;
Description

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.

normal

This is the default value. Line breaks will happen based on default line breaking rules.

break-all

This allows line breaks to happen anywhere, including between two letters.

keep-all

This affects CJK (Chinese, Japanese, and Korean) text only. Here, text words are not broken.

CSS:

.element {
  word-break: break-all;
}

word-spacing

The word-spacing CSS property controls the space between words, and it looks like this:

word-spacing: .2em;
Description

It supports the following values: a normal value, a length value and a percentage value.

normal

This is the default value. It's defined by the current font or the browser itself, and it resets to the default spacing.

Length value

We use one of the following units when we use a length value: px, em, in, mm, cm, vw, and so on

Percentage value

For a percentage value, we use percentages like 50%, 85%, and so on.

CSS:

.element {
  word-spacing: .2em;
}

word-wrap

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;
Description

This property supports two keyword values: normal and break-word.

  • normal: It makes long words break at normal break points
  • break-word: It indicates that otherwise unbreakable words can now break at an arbitrary point

CSS:

.element {
  word-wrap: break-word;
}

line-height

The line-height CSS property defines the distance between lines of text. In typography, the line height is called leading.

Description

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 like 50%, 85%, and so on.

CSS:

.element {
  line-height: 1.6;
}

orphans

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;
Description

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;
}

quotes

The quotes CSS property controls the types of quotation marks to use, and it looks like this:

quotes: """ """ "'" "'";
Description

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.

none

No quotation marks are generated when using the content property.

[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: "?" "?" "?" "?"; }

widows

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;
Description

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;
}

writing-mode

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;
Description

This property supports three keyword values: horizontal-tb, vertical-rl, and vertical-lr.

horizontal-tb

This means horizontal, from top to bottom. The content flows from left to right, top to bottom.

vertical-rl

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).

vertical-lr

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;
}

letter-spacing

The letter-spacing CSS property defines the space between the characters in a line of text, and it looks like this:

letter-spacing: 5px;
Description

The letter-spacing property supports the keyword values: normal and length.

Negative values are valid.

Tip

Unless you understand the legibility and design implications, the default letter spacing in most fonts is ideal and should rarely be changed.

CSS:

.element {
  letter-spacing: 5px;
}

white-space

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;
Description

This property supports five keyword values: normal, nowrap, pre, pre-wrap, and pre-line.

normal

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.

nowrap

Multiple spaces will collapse into a single space, and the line will never wrap except if there's a <br> tag in the markup.

pre

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.

pre-wrap

This value honors all the spaces and will wrap the text where necessary. This value is great to display long chunks of code.

pre-line

This value collapses multiple spaces into a single space and will wrap the text where necessary.

tab-size

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.

Description

The tab-size property supports two values: A numeric value and a length value.

  • Numeric value: It's just a number without a unit. Negative values are not valid.
  • Length value: We use one of the following units when we use the length value: px, em, in, mm, cm, vw, and so on.

CSS:

pre {
  white-space: pre-wrap;
  tab-size: 4;
}
主站蜘蛛池模板： 盘锦市| 布尔津县| 辽源市| 凤城市| 马龙县| 昌乐县| 安顺市| 长武县| 南岸区| 怀集县| 南江县| 宝坻区| 通州区| 鲜城| 共和县| 延安市| 廉江市| 凤台县| 奎屯市| 绥德县| 新蔡县| 迁安市| 揭东县| 阳江市| 侯马市| 奇台县| 光泽县| 伊宁县| 卢湾区| 建水县| 杭锦旗| 信丰县| 民权县| 天水市| 东港市| 黄山市| 老河口市| 汉沽区| 万盛区| 渭南市| 涞水县|