Email or username:

Password:

Forgot your password?
All posts Stefan's posts Post Back to profile
Stefan Judis

CSS quick tip: if you're adding quotation characters use `open-quote` and `close-quote` as content because they consider the document language. 💪

stefanjudis.com/today-i-learne
10 April at 16:38 | Open on front-end.social
14 comments
Matt Wilcox
meduz'

@stefan Ha, a CSS bit I forgot. Thanks!

10 April at 16:40 | Open on m.nintendojo.fr
alster
@stefan TIL: That languages do use different quotes,w hile I thought all languages use simply " " and the rst is just different styling.
10 April at 17:12 | Open on social.alster.space
Stephanie
rag. Gustavino Bevilacqua
Will Boyd

@stefan oh hey thanks for the shout-out! 🙂

10 April at 18:23 | Open on front-end.social
David Larlet

@stefan @HTeuMeuLeu the `quote` parameter car also be handy to add non-breaking spaces, for instance in French:

[lang=fr] {
/* « » « » (non-breaking spaces added) */
--q-quotes: '\00ab\202F' '\202F\00bb' '\00ab\202F' '\202F\00bb';
}
q {
quotes: var(--q-quotes);
}
q::before {
content: open-quote;
}
q::after {
content: close-quote;
}

Also, there is quite a list there github.com/jensimmons/cssremed

#typonerd

@stefan @HTeuMeuLeu the `quote` parameter car also be handy to add non-breaking spaces, for instance in French:

[lang=fr] {
/* « » « » (non-breaking spaces added) */
--q-quotes: '\00ab\202F' '\202F\00bb' '\00ab\202F' '\202F\00bb';
}
q {
quotes: var(--q-quotes);
}
q::before {
content: open-quote;
}
q::after {
content: close-quote;
}

10 April at 19:06 | Open on fedi.larlet.fr
Lea Rosema

@stefan learned something new, thank you 😍

10 April at 19:30 | Open on lea.lgbt
Sebastian LaVine

@stefan I've played around with these before, but doesn't this mean that when highlighting text to copy, the quotes aren't highlighted? At least in my testing. Since the text isn't actually part of the content

10 April at 19:38 | Open on fosstodon.org
Eana Hufwe

@smlavine@fosstodon.org @stefan@front-end.social Firefox seems to have hard coded an exception to insert an ASCII " for any regardless of languages, while Chrome does nothing as if these are just simple CSS pseudo elements.

There’s a proposal to make these quotation marks copyable.
https://github.com/whatwg/html/issues/10216

10 April at 20:39 | Open on s.1a23.studio
⸶papush⸷
@stefan i'm still angered tho
(but nice tip)
10 April at 20:12 | Open on outerheaven.club
queerthoughts
Jarek Rozanski
chrysn

@stefan Some (waving at @jyasskin) disagree with the advice to use <q>. I'm leaning more towards "fix the browser", but be aware: hachyderm.io/@jyasskin/1121303

11 April at 5:34 | Open on chaos.social
Go Up