search

janeczku / calibre-web

:books: Web app for browsing, reading and downloading eBooks stored in a Calibre database
GNU General Public License v3.0
12.05k stars 1.29k forks source link

Many light novels have vertical typesetting errors when displayed in calibre-web, resulting in display issues. #2978

Closed raindrop213 closed 2 months ago

raindrop213 commented 5 months ago

Describe the bug/problem calibre-web does not seem to be friendly to vertically formatted epubs.

Since they are original Japanese light novels, most of them are vertically typeset. For specific details on the display errors, please see the Screenshots section below. I enjoy reading light novels, and I've noticed that many older light novels do not display correctly (with formatting errors) when opened in calibre-web, yet they display fine in calibre and many other EPUB readers. Does anyone know what might be causing this issue? I would be very grateful for any help! This problem has been bothering me for a long time and persists across many versions. Is it an issue with the EPUB files or with calibre-web? I've observed this issue particularly with very old ebooks.

Logfile This is the file with display errors: Incorrectly displayed EPUB This is the file displayed correctly: Correctly displayed EPUB

Screenshots Here are the display differences of "Incorrectly displayed EPUB" in calibre and calibre-web: display: calibre - Correctly displayed calibre display: calibre-web - Incorrectly displayed calibre-web

-- Here are the display differences of "Correctly displayed EPUB" in calibre-web (on different platforms): display: phone - Incorrectly displayed phone display: pad - Incorrectly displayed pad display: pc - Correctly displayed pc

Environment (please complete the following information):

raindrop213 commented 4 months ago

I've found a solution

content.opf

<dc:language>ja</dc:language>
<meta name="primary-writing-mode" content="vertical-rl" />
<spine toc="ncx" page-progression-direction="rtl">

stylesheet.css

body {
    margin: 5%;
    text-align: justify;
    -webkit-writing-mode: vertical-rl;
}
.vrtl {
    -webkit-writing-mode: vertical-rl;
    font-family: serif-ja, serif
    }

All Text/html

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xml:lang="ja" class="vrtl">
raindrop213 commented 4 months ago

Now, PC device can work correctly, but the mobile device still can not display correctly