Skip to content

Instantly share code, notes, and snippets.

@kogakure

kogakure/inline-quotes-example.html

Created November 28, 2013 19:05
Show Gist options
  • Save kogakure/7696789 to your computer and use it in GitHub Desktop.
Save kogakure/7696789 to your computer and use it in GitHub Desktop.
Download ZIP
SASS/CSS: SASS-Mixin for correct quotes around `q` inline-quotes, with correct nesting.
Raw
inline-quotes-example.html
<!DOCTYPE html>
<html lang="de">
<!-- On the html element -->
<head>
<title>Quote-Demo</title>
</head>
<body>
<!-- or on another element -->
<p lang="de">Luke führte weiter aus, <q>Und sie nannte ihn einen <q>total blöd-aussehenen Idioten</q>! Ich denke ich habe eine Chance!</q> Dieser arme Idiot …</p>
<p lang="en">Luke conntinued, <q>And the she called him a <q>scruffy-looking nerf-herder</q>! I think I’ve got a chance!</q> The poor naive fool …</p>
<p lang="ja">彼女は<q>日本語に猫は<q>にゃん</q>と鳴く</q>と言った。</p>
</body>
</html>
Raw
mixin.scss
// Quotes for `q` in multiple languages
@mixin q-quotes($language, $quotes) {
:lang(#{$language}) > q,
.article-body q[lang|=#{$language}] {
quotes: $quotes;
// Japanese shouldn’t be italic
@if $language == "ja" {
font-style: normal;
}
}
}
Raw
quotes.scss
q {
font-style: italic;
}
@include q-quotes(de, '»' '«' '›' '‹');
@include q-quotes(en, '“' '”' '‘' '’');
@include q-quotes(fr, '« ' ' »' '“' '”');
@include q-quotes(ja, '「' '」' '『' '』');
q:before {
content: open-quote;
}
q:after {
content: close-quote;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment