hanging-punctuation

Definition

The hanging-punctuation CSS property is used to control whether punctuation marks at the beginning or end of a line are allowed to hang outside the text box or not. When this property is enabled, the punctuation marks that would normally appear at the beginning or end of a line are shifted outside the text box, which can create a cleaner and more visually appealing layout.

Examples

Enable hanging punctuation for all paragraphs:

p {
  hanging-punctuation: first;
}

Enable hanging punctuation for specific elements:

blockquote {
  hanging-punctuation: last;
}

h1 {
  hanging-punctuation: end;
}

Disable hanging punctuation:

p {
  hanging-punctuation: none;
}

Values

Best Practices

• Use hanging punctuation sparingly and only when it improves the visual design of your content.
• Avoid using hanging punctuation for large blocks of text, as it can make the text harder to read.
• Test your design across different screen sizes and devices to ensure that the hanging punctuation doesn't cause layout issues or readability problems.
• Consider using fallback options for browsers that don't support the hanging-punctuation property, such as manually adding hanging punctuation marks with the ::before and ::after pseudo-elements.
• Don't rely solely on hanging punctuation to create visually appealing content; it should be used in conjunction with other design elements to create a cohesive layout.

Browser Compatibility