Page 1 of 1
Consistent inlining of span__titles in notes fails
Posted: Thu Jan 23, 2025 6:49 pm
by Vinny
Folks,
I've been trying to get my notes consistently looking like this:
Screenshot 2025-01-23 at 16.45.22.png
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
Is there a way to force the inlining in the first paragraph, no matter what comes after?
Thanks!
Re: Consistent inlining of span__titles in notes fails
Posted: Fri Jan 24, 2025 9:03 am
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.
Re: Consistent inlining of span__titles in notes fails
Posted: Fri Jan 24, 2025 12:37 pm
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.
Re: Consistent inlining of span__titles in notes fails
Posted: Mon Jan 27, 2025 10:57 am
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
Re: Consistent inlining of span__titles in notes fails
Posted: Mon Jan 27, 2025 4:36 pm
by Vinny
Thanks Julien for your input!