What is the Hanging-punctuation property for and how?

Question

I know the property hanging-punctuation provides a control over typography on the web, but I’m not sure what this control is and how it works. I also saw that the property supports some values, such as first, last, force-end and others, but honestly I see no difference between them, nor with examples.

Doubts

1. What is the ownership control over typography?
2. What are the differences between the main accepted values?
3. What is its usefulness and why we should use it (if we should)?
4. The property is supported by many browsers?
5. Is it used? If yes, how?

Answer 1

João Pedro, the hanging-punctuation is used to place symbols such as quotation marks, period and Bullets outside the line of text, being the opposite of indent (indent pushes text in, Hanging-punctuation does not affect the alignment of text with paragraph).

Visually, the effect would be:

Without Hanging-punctuation:

I like:

• cats;

• swine;

• With hanging-punctuation:first; (note the alignment of the letter "E" and the letter "g" and not the fact that it is a list).

  I like:

• cats;

• swine;

Your doubts:

What is the ownership control over typography? The property gives you control over the full alignment of the text, preventing whitespace from being inserted before (first) or after the text (after). The property then allows full alignment of the text as defined in text-align.

What are the differences between the main accepted values? The value "first" will insert the punctuation outside the line of the text and preceding the first line, in turn the value "after" will insert the punctuation also outside the line of the text, but after the last line.

As to the value "allow-end", this will insert the punctuation outside all lines of the text, after that line, only if the punctuation is not entered otherwise. For example, if the punctuation is inserted in the middle of a paragraph (not at the beginning or at the end), there is no reason to shift the punctuation:

• Example: Then the bard began to play and everyone shouted "Hurrah" and enjoyed the song.

In turn, the "force-end" value causes the score to be shifted across all lines, also at the end, regardless of position.

What is its usefulness and why we should use it (if we should)? The utility is to shift the score by improving the aesthetics and reading flow. Because it is not supported by many browsers, as well as in the case of "first" it is possible to obtain the same result through the text-indent (with negative value in the case), use is not recommended.

**Is the property supported by many browsers? No, the property is supported by the Safari browser and only partially.

**Is it used? If so, how? I haven’t located anything about the use of the property.

For more information, this is a great source on CSS and it’s what I used: https://tympanus.net/codrops/css_reference/hanging-punctuation/.

Answer 2

The CSS property specifies whether a punctuation mark should be stopped at the beginning or end of a line of text. hanging-punctuation The suspended score can be placed outside the row box.

/* Keyword values */
hanging-punctuation: none;
hanging-punctuation: first;
hanging-punctuation: last;
hanging-punctuation: force-end;
hanging-punctuation: allow-end;

/* Two keywords */
hanging-punctuation: first force-end;
hanging-punctuation: first allow-end;
hanging-punctuation: first last;
hanging-punctuation: last force-end;
hanging-punctuation: last allow-end;

/* Three keywords */
hanging-punctuation: first force-end last;
hanging-punctuation: first allow-end last;

/* Global values */
hanging-punctuation: inherit;
hanging-punctuation: initial;
hanging-punctuation: unset;

Syntax

The estate hanging-punctuation can be specified with one, two or three values.

The syntax of a value uses any of the keyword values in the list below. The two value syntax uses one of the following: firstem set with any of last, allow-endouforce-end together with any of first, allow-endouforce-end The three value syntax uses one of the following: first, allow-endelast first, force-endelast

Example: Codepen

Compatibility

Source of the Research: MDB Web Docs

Enter the search source for more information.