Consistent inlining of span__titles in notes fails

Having trouble installing Oxygen PDF Chemistry? Got a bug to report? Post it all here.
Vinny
Posts: 25
Joined: Wed Jan 12, 2022 1:07 pm

Consistent inlining of span__titles in notes fails

Post by Vinny »

Folks,
I've been trying to get my notes consistently looking like this:
Screenshot 2025-01-23 at 16.45.22.png
Screenshot 2025-01-23 at 16.45.22.png (26.3 KiB) Viewed 448 times
That is, with the span.note__title inlined.
However, as soon as my note includes a <p> or a list <ol> or <ul>, the default behaviour is to have a line break after the title:
Screenshot 2025-01-23 at 16.48.23.png
Screenshot 2025-01-23 at 16.48.23.png (25.77 KiB) Viewed 448 times
Is there a way to force the inlining in the first paragraph, no matter what comes after?
Thanks!
xephon
Posts: 156
Joined: Mon Nov 24, 2014 1:49 pm
Location: Greven/Germany

Re: Consistent inlining of span__titles in notes fails

Post by xephon »

This should be doable with two CSS rules. One could show the text before the texual content when the note does not have block elements. You can check this with :not() and :has() in CSS. The other rule should place it, when the opposite is the case.
stefan-jung.org – Your DITA/DITA-OT XML consultant
Vinny
Posts: 25
Joined: Wed Jan 12, 2022 1:07 pm

Re: Consistent inlining of span__titles in notes fails

Post by Vinny »

Thanks for your suggestion. I’ll try to tinker a bit more.
EDIT: Okay, I came up with the following solution:

Code: Select all

span.note__title {
    display: none;
}
div.note__body:before {
    content: var(--message-note);
    font-family: 'Raleway SemiBold';
}
div.note {
    page-break-inside: avoid;
    background-color: #F2FAFF;
    border: 3px solid #37769D;
    border-radius: 10px;
    --message-note: "Note: "
}
So the standard message is disabled, a variable is set according to the level of ‘importance' of the note, and that string variable is placed as part of the :before pseudo-selector and displayed in bold face. That works. Thanks for suggesting.

By the way, I couldn't make the :has() selector work correctly. For some reason, :has( .p ) works, but :has( p ) doesn’t, even if the <span> tag has a <p class="p"> child.
julien_lacour
Posts: 621
Joined: Wed Oct 16, 2019 3:47 pm

Re: Consistent inlining of span__titles in notes fails

Post by julien_lacour »

Hello,

To discard the line break after the note title, you can force the note__body children display:

Code: Select all

div.note__body > * {
  display: inline;
}
In this case the break appears because the paragraph element is displayed as a block thus below the title.

Also regarding the :has() part, I tried the following rule:

Code: Select all

.note__body:has(p) {
  background-color: orange;
}
And I did get an orange paragraph in the final PDF output.

You can make sure the CSS rules are correctly applied by debugging the CSS using the merged.html file generated during the transformation.

Regards,
Julien
Vinny
Posts: 25
Joined: Wed Jan 12, 2022 1:07 pm

Re: Consistent inlining of span__titles in notes fails

Post by Vinny »

Thanks Julien for your input!
Post Reply