mhr mhr - 2 months ago 13
CSS Question

CSS quotes in title, and quote in a quote

I have some trouble with quotation marks in my Wordpress site since I used a new theme and added a few plug-ins.

First problem : I'd like to have French quotation marks (« ») in the title of my pages (I'm talking about the HTML

<title>
), as it was before, for instance here.

Second problem : I have blockquotes in my posts (with French quotes) which sometimes contain another quote : I'd like these "inside quotes" to have double quotation marks (" "). I tried to do this with the CSS quotes property but it doesn't seem to work. For instance here (4th blockquote).

Some more information : I use Qode Bridge theme, and a few plug-ins, especially Yoast SEO that can have an impact on the title issue.

Answer

You really should have profit of CSS quotes property. Have a look on this example:

.guillemets {
  quotes: "«\00A0""\00A0»";
  font-style: italic;
}
.guillemets::before {
  content: open-quote;
}
.guillemets::after {
  content: close-quote;
}
.guillemets .guillemets {
  quotes: "\"" "\"";
  font-style: normal;
}
<p>Lorem ipsum dolor sit amet, <span class="guillemets">consectetur adipiscing</span> elit. Etiam et porttitor turpis. Aenean eget ligula tristique, aliquet quam sit amet, faucibus nunc. Ut quam dui, vulputate sit amet nunc id, aliquet commodo augue.
  <span class="guillemets">Nulla <span class="guillemets">efficitur</span> nisi dignissim erat mollis</span>, nec feugiat felis egestas.
</p>

The \00A0 is the unbreakable space wich is needed after opening guillemets and before the closing one in french typography.