search

Kareadita / Kavita

Kavita is a fast, feature rich, cross platform reading server. Built with the goal of being a full solution for all your reading needs. Setup your own server and share your reading collection with your friends and family.
http://www.kavitareader.com
GNU General Public License v3.0
6.1k stars 315 forks source link

Text with both italics and bold formatting is displayed without #2511

Open notsatan opened 9 months ago

notsatan commented 9 months ago

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:

Screenshot displaying the issue

Desktop (please complete the following information):

Additional context

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

notsatan commented 9 months ago

Note: The book is ePub format

majora2007 commented 9 months ago

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

image

notsatan commented 9 months ago

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 commented 9 months ago

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 commented 8 months ago

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 commented 8 months ago

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.