Text with both italics and bold formatting is displayed without

[notsatan]

As the title states, bold text with italics mixed in, is being displayed as normal text

Describe the bug

The issue is seen in the home page for individual books (https://kavita.url/library/6/series/71), the book summary contains bold text, with some words having an additional italics mixed in

The words with italics (and bold) are being displayed as normal text instead. When inspecting the HTML code, I can see;

<p>
	<strong>The book that sparked a revolution and inspired the hit Netflix series&nbsp;</strong><span>Tidying Up with Marie Kondo</span><strong>: the original guide to decluttering your home once and for all</strong>
</p>

To Reproduce Steps to reproduce the behavior:

1. Add a book that has words with both bold and italics font in the overview
2. Locate the book in your Kavita instance
3. Take a look at the words that are supposed to be in bold, with italics
4. You'll notice that they are being displayed as normal text instead

Screenshots:

Desktop (please complete the following information):

• OS: Docker
• Browser: Chrome
• Version: 0.7.11.2

Additional context

Formatted book metadata with Calibre. Can see the text as expected when editing in Calibre

[notsatan]

Note: The book is ePub format

[majora2007]

You don't have any code to make something italicized. Span is just an element without styling. I think you wanted

[notsatan]

Tested this a bit more, this seems to be a Calibre issue rather — here's what I'm seeing on the HTML source view within Calibre for this book

<p style="font-family: 'Amazon Ember','Arial','sans-serif'; font-size: 14px">
	<strong style="color: #dedbd7; background-color: #181a1b">The book that sparked a revolution and inspired the hit Netflix series </strong>
	<span style="font-weight: bold; font-style: italic; color: #dedbd7; background-color: #181a1b">Tidying Up with Marie Kondo</span>
	<strong style="color: #dedbd7; background-color: #181a1b">: the original guide to decluttering your home once and for all</strong>
</p>

It is closing the <strong> tag, and then creating a new span tag! The "View Mode" in Calibre shows the span text as both bold, and in italics

On top of this, manually changing the span tag to simpler i tag for italics within the first strong tag doesn't seem to work either, Calibre reformats the entire HTML when saving, bring us back to here!

[majora2007]

Hmm, I think i see what is happening here. When I use that blurb above, Kavita is stripping the styling due to the html being seen as unsafe by Angular. I'm not sure this is something I can support.

This issue would allow me to implement support for it. I will reopen this issue and stick it in the backlog and monitor the other issue to see if this is ever implemented by Angular. For now, you can use <i> tag by manually editing with Sigil. I would also advise you to not have styling in your book because that wouldn't work well within Kavita if you're using different themes.

https://github.com/angular/angular/issues/36650

[charles7668]

Perhaps this problem can be resolved by using DOMPurify instead of Angular's DomSanitizer

I have tried it, and it appears to be working well.

[majora2007]

This library looks good. I see you raised a PR already. I'll look at this post the next release.

We will need to update the safe HTML pipe and any other references of Dom sanitizer.