The hanging-punctuation property in CSS is a simple and effective way to improve the appearance of blockquotes or any text that starts with a curly quote. By hanging the opening quote into the space off to the start of the text and aligning the actual words, it creates a better visual look. The property can be applied by using “hanging-punctuation: first last” in the CSS code. However, Safari may not fully support the “last” value, causing punctuation to not hang off the other edge as intended. There is a slight risk of triggering a horizontal scroll bar if there is no available space, but this is rare. To ensure cross-browser compatibility, a negative text-indent can be used instead, with a fallback for unsupported browsers. The use of a magic number for text-indent can be avoided by isolating where it is applied or using a custom property. It’s worth noting that hanging punctuation is relevant in design software and print design as well, often referred to as “Optical Margin Alignment.” Overall, hanging punctuation is a nice bonus in supported browsers, but not essential if not available.
https://chriscoyier.net/2023/11/27/the-hanging-punctuation-property-in-css/