2 ms·

I think I've seen it on quite a few sites. It would be nicer if you could do a ::before and maybe also specify pull width to be the width of a quotation mark:

I think I've seen it on quite a few sites. It would be nicer if you could do a ::before and maybe also specify pull width to be the width of a quotation mark: dquo-pull::before { margin-right: -made-up-string-width(“); } dquo-pull { margin-left: calc(-1 * -made-up-string-width(“)); } She said: <dquo-pull>“That’s</dquo-pull> (I think you can do something like that with container query units [1], but I haven't managed to do it just yet.) UPD: container query wouldn't work here because if you set `container-type: inline-size` on dquo-pull, it will get inline size set to zero, as if it had no content [2]. [1]: https://developer.mozilla.org/en-US/docs/Web/CSS/length#container_query_length_units https://developer.mozilla.org/en-US/docs/Web/CSS/length#cont... [2]: https://drafts.csswg.org/css-contain-3/#containment-inline-size https://drafts.csswg.org/css-contain-3/#containment-inline-s... > although now with `hanging-punctuation` it is unnecessary `hanging-punctuation` only works at the start of the block element though. Maybe that'll change in the future though!

ttepasse 3y ago
If I remember correctly, pseudo-elements act as they are children of their "parent" element, e.g. <dquo-pull><::before></::before>... </dquo-pull> In that case the ::before element doesn't linebreak independently from its "parent" element and so those two elements are always together, even at a break before the start of a new line.
- notpushkin 3y ago
 You could set `display: contents` on the outer element – this will put ::before in the parent flow instead. But then the quote mark becomes a text node and you can't pull that back without another wrapper element: And then she said: <char-hang>“</char-hang>Hello, handsome! What a day, huh? which will be rendered like this: "And then she said: "  <char-hang::before />  “ "Hello, handsome! What a day, huh?" Without adding another element, you can use a hack though: make the quote mark transparent and use text-shadow to “move” it back instead: https://jsfiddle.net/utjxnv1r/3/ https://jsfiddle.net/utjxnv1r/3/ And if we allow JS, we can just create a custom element and avoid those hacks altogether (also you don't have to calculate / eyeball the offset you need anymore): https://jsfiddle.net/c72uLtma/ https://jsfiddle.net/c72uLtma/

ttepasse 3y ago

If I remember correctly, pseudo-elements act as they are children of their "parent" element, e.g. <dquo-pull><::before></::before>... </dquo-pull> In that case the ::before element doesn't linebreak independently from its "parent" element and so those two elements are always together, even at a break before the start of a new line.

notpushkin 3y ago
You could set `display: contents` on the outer element – this will put ::before in the parent flow instead. But then the quote mark becomes a text node and you can't pull that back without another wrapper element: And then she said: <char-hang>“</char-hang>Hello, handsome! What a day, huh? which will be rendered like this: "And then she said: "  <char-hang::before />  “ "Hello, handsome! What a day, huh?" Without adding another element, you can use a hack though: make the quote mark transparent and use text-shadow to “move” it back instead: https://jsfiddle.net/utjxnv1r/3/ https://jsfiddle.net/utjxnv1r/3/ And if we allow JS, we can just create a custom element and avoid those hacks altogether (also you don't have to calculate / eyeball the offset you need anymore): https://jsfiddle.net/c72uLtma/ https://jsfiddle.net/c72uLtma/