Can you adjust callout width with readable line length enabled?

Custom CSS & Theme Design
1

What I’m trying to do

Is it possible to remove the max width of callouts if readable line length is enabled? I have some automation adding a weather forcast ascii art in callouts but they need to break out of the container. I’d like to keep them centered but wider and maintain the same readable line length for the rest of the note.

Things I have tried

I’ve been trying all sorts of things with css snippets but it seems I can’t widen just the callout box.
I did find that I could modify the width restriction of the callout with the following, but it’s still being truncated by the margins set by the readable line length, so the callout starts at the left margin respected by the rest of the text and is hidden starting at the right margin.

.markdown-source-view.is-live-preview .callout,
.markdown-reading-view .callout {
  border: 3px solid lime !important;
  width: 190% !important;
}
2

There’s for sure a better way to do this without the negative margin (:sweat_smile:), but this seems working, doesn’t mess with text input, and is limited to a specific callout (or attribute text entered manually for individual callouts). You could give it a try.

Here’s using a custom > [!weather] callout.

.callout[data-callout="weather"] {
    border: 3px solid lime;
}

.markdown-preview-section > div:has([data-callout="weather"]),
.markdown-source-view.mod-cm6 .cm-embed-block:has([data-callout="weather"]) {
    margin: 0px -100px !important;
}

Screenshot 2025-05-02 151649
Screenshot 2025-05-02 151649927×649 22.7 KB

An alternative is using alt/attribute text with any callout. e.g.
> [!example|weather], > [!bug|weather], etc.


.callout[data-callout-metadata~="weather"] {
    border: 3px solid lime;
}
.markdown-preview-section > div:has([data-callout-metadata~="weather"]),
.markdown-source-view.mod-cm6 .cm-embed-block:has([data-callout-metadata~="weather"]) {
    margin: 0px -100px !important;
}