Consistent inlining of span__titles in notes fails
Having trouble installing Oxygen PDF Chemistry? Got a bug to report? Post it all here.
Consistent inlining of span__titles in notes fails
Folks,
I've been trying to get my notes consistently looking like this:
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:
Is there a way to force the inlining in the first paragraph, no matter what comes after?
Thanks!
I've been trying to get my notes consistently looking like this:
- Screenshot 2025-01-23 at 16.45.22.png (26.3 KiB) Viewed 448 times
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 (25.77 KiB) Viewed 448 times
Thanks!
Re: Consistent inlining of span__titles in notes fails
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
Re: Consistent inlining of span__titles in notes fails
Thanks for your suggestion. I’ll try to tinker a bit more.
EDIT: Okay, I came up with the following solution:
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.
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: "
}
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.
-
- 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:
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:
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
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;
}
Also regarding the :has() part, I tried the following rule:
Code: Select all
.note__body:has(p) {
background-color: orange;
}
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
Jump to
- Oxygen XML Editor/Author/Developer
- ↳ Feature Request
- ↳ Common Problems
- ↳ DITA (Editing and Publishing DITA Content)
- ↳ SDK-API, Frameworks - Document Types
- ↳ DocBook
- ↳ TEI
- ↳ XHTML
- ↳ Other Issues
- Oxygen XML Web Author
- ↳ Feature Request
- ↳ Common Problems
- Oxygen Content Fusion
- ↳ Feature Request
- ↳ Common Problems
- Oxygen JSON Editor
- ↳ Feature Request
- ↳ Common Problems
- Oxygen PDF Chemistry
- ↳ Feature Request
- ↳ Common Problems
- Oxygen Feedback
- ↳ Feature Request
- ↳ Common Problems
- Oxygen XML WebHelp
- ↳ Feature Request
- ↳ Common Problems
- XML
- ↳ General XML Questions
- ↳ XSLT and FOP
- ↳ XML Schemas
- ↳ XQuery
- NVDL
- ↳ General NVDL Issues
- ↳ oNVDL Related Issues
- XML Services Market
- ↳ Offer a Service