How to put strong text (between double asterisks) in a different color and normal weight?

[adamiturabi]

Description

I would like to have strong text, like **strong text**, rendered in a different color but in normal weight, i.e. not bold. Here is what I tried:

---
title: "Quarto Basics"
format:
  html:
    code-fold: true
    theme:
      - custom.scss
---

## A heading

This is some **strong text**.

custom.css:

/*-- scss:defaults --*/
$rubric-red: #9b111e;

$headings-color: $rubric-red;
$navbar-hl: $rubric-red;
$link-color: $rubric-red;

/* Remove bottom border from all headings */
h1, h2, h3, h4, h5, h6 {
  border-bottom: none !important;
}

/* Use rubric-red font color in normal weight instead of bold */
strong {
  font-weight: normal;
  color: $rubric-red;
}

Output:

The output is in the different color, but it is in bold, not in normal weight. How may I fix it?
Thanks.

[mcanouil]

@adamiturabi Please add proper alternative text to your images.

Important

Accessibility: To improve accessibility, please add alternative text to your screenshots. This helps all users, including those using screen readers, to understand the context of the images. A brief description can make a big difference! See Good Alt Text, Bad Alt Text — Making Your Content Perceivable.

[mcanouil]

I'm not sure why you would want to change the meaning of the markup.
First you need to understand what HTML is produced and what that HTML means. That's independent of Quarto. Same with (S)CSS.

If you really wish to change the **<text>** (thus __<text>__), then I suggest you use a Lua filter to actually do so. This filter could add a class that you can easily control via CSS.

This being said, in my opinion, that is a cumbersome approach either way, especially if you intend your project/document code to reach collaborators.

If what you want is only to highlight some words/sentences, then I suggest to use existing extensions like Highlight Text which works on multi-format.
It' more typing but at least it does not change Markdown markup meaning.

[have-you-tried-restarting]

The most likely cause is where the strong rule sits in the file, not the CSS itself.

In a Quarto theme file, the part under /*-- scss:defaults --*/ is for variables, and it is placed before Bootstrap. Normal CSS rules belong under /*-- scss:rules --*/, which is placed after it (HTML Theming: Theme Options: "the variables section is denoted by the /*-- scss:defaults --*/ comment and the rules section (where normal CSS rules go) is denoted by the /*-- scss:rules --*/ comment").

Your strong { ... } rule is in the defaults part. Bootstrap, which comes after it, then sets this with the same specificity and wins:

// Bootstrap's _reboot.scss, as bundled with Quarto
b,
strong {
  font-weight: $font-weight-bolder;   // bolder
}

That fits what you see: the colour applies, because Bootstrap sets none on strong, but the weight stays bold. Your heading rule still works only because it carries !important.

Either of these should fix it. Put the rule in the rules section:

/*-- scss:defaults --*/
$rubric-red: #9b111e;

$headings-color: $rubric-red;
$navbar-hl: $rubric-red;
$link-color: $rubric-red;

/*-- scss:rules --*/
h1, h2, h3, h4, h5, h6 {
  border-bottom: none !important;
}

strong {
  font-weight: normal;
  color: $rubric-red;
}

Or change the variable Bootstrap uses for strong and b, which needs no rule at all:

/*-- scss:defaults --*/
$font-weight-bolder: normal;

I haven't rendered your project. This comes from Quarto's docs and the Bootstrap source in the Quarto repo. If it still renders bold, open the browser's dev tools on the text and see which font-weight rule is winning.

On the markup point raised above: <strong> means "important", so if you only want coloured emphasis, a custom class or span is the safer route. The fix above does what you asked for.

[adamiturabi]

Thank you.

@mcanouil , I have added the alt-text as you requested. I think the filter is a good idea and I think I may go with it. However, my purpose was that the qmd source be entered as if bold-emphasis is needed for some "strong" text. And then depending on the output format, a style be applied to render the strong text in a rendering which is suitable to the output format. So perhaps a red color for HTML while retaining bold for PDF. And because I need to add strong text in many places throughout the book, the asterisks are convenient rather than having to type the span format everywhere.

@have-you-tried-restarting , your fix works great. Thanks.

[have-you-tried-restarting]

Glad I could be of help :)