How to do "Semantic Quotes" with the <q> tag, but it is with a different font-family

Asked

Viewed 434 times

3

The question is very simple and objective, I want to have a font style for the paragraph and another font style for the quotes, but when I put the content between the tag <q> what’s inside takes the font-family of <q> and loses the font-family of <p>.

For clarity see the example.

p {
  font-size: 32px;
  font-family: serif;
}
q {
  font-family: sans-serif;
}
<p>Lorem ipsum dolor sit amet consectetur, <q>adipisicing elit</q>. Ipsum, quas.</p>

The part of the text that is involved by the tags <q> gets the different font-family than the <p>, but I just want the quotes and not the whole text inside the tag

I don’t want to use quotation marks on the body of the text, it has to be with the tag <q>, That would have no value ok ... "texto" ...

How can I solve this problem semantically using the tag <q> and in a way that I can reuse in other parts of the text?

html css semantics

  • I do not know what this has to do with semantics and I honestly found it difficult to understand the statement ... but I suppose you want this q { quotes: "«" "»" "‹" "›"; } (is just an example), I understood right?

  • @Guillhermenascimento In fact it is that theoretically ta <q> seria a tag para quote correto?For the screen reader to understand that is in quotes and not use "text" and yes <q>text</q> understands. I think I may have expressed myself badly, what I mean is that it would be mandatory to use the tag <q> to put the contents inside. And it has more to do with the font-family and not with the quote type.

  • 2

    There is no way to say that a screen reader will recognize <q> or " or ', this is speculation, there are different screen readers, with varied functionalities, support or lack of support for certain HTML tags. I could "assume" that a good screen reader recognizes all (<q>, ", '), because the idea is to actually read the text and not every dev is a good dev to understand the needs of visually impaired people.

  • 1

    @Guilhermenascimento is a very interesting point of view! Until pq some readers are paid, and sometimes those who do not want to buy the newer version that support the newer things can become subject to this kind of "detail".... (not that tagged <q> be new)

1 answer

2


One way to do this is by defining the font-family differentiated only for pseudo-elements after and before tag q:

p {
  font-size: 32px;
  font-family: serif;
}

q:before {
  content: open-quote;
  font-family: sans-serif;
}
q:after {
  content: close-quote;
  font-family: sans-serif;
}
<p>Lorem ipsum dolor sit amet consectetur, <q>adipisicing elit</q>. Ipsum, quas.</p>

With this, only the quotation marks will have the font-family different. The content that is within <q> gets the same source as <p>.

Remembering that if the q has specific rules, pseudo-elements will also have:

p {
  font-size: 32px;
  font-family: serif;
}

/* q com regras específicas, serão aplicadas em before e after */
q {
  color: red;
}
q:before {
  content: open-quote;
  font-family: sans-serif;
}
q:after {
  content: close-quote;
  font-family: sans-serif;
}
<p>Lorem ipsum dolor sit amet consectetur, <q>adipisicing elit</q>. Ipsum, quas.</p>

In this case, the before and after inherit the red color defined in q. If this is not desired, just define a different color in the pseudo-elements:

p {
  font-size: 32px;
  font-family: serif;
}

/* q com regras específicas */
q {
  color: red;
}
q:before {
  content: open-quote;
  font-family: sans-serif;
  /* sobrescrever a cor definida em q */
  color: black;
}
q:after {
  content: close-quote;
  font-family: sans-serif;
  /* sobrescrever a cor definida em q */
  color: black;
}
<p>Lorem ipsum dolor sit amet consectetur, <q>adipisicing elit</q>. Ipsum, quas.</p>

Reference: MDN

  • 1

    I thank you for your contribution

Browser other questions tagged html css semantics

You are not signed in. Login or sign up in order to post.