johnfactotum / foliate-js

Render e-books in the browser
https://johnfactotum.github.io/foliate-js/reader.html
MIT License
412 stars 60 forks source link

Add support for vertical epubs #36

Closed CaptainDario closed 1 month ago

CaptainDario commented 1 month ago

First of all, this is an awesome package! Thank you!

I was playing around with the reader demo and tried some Japanese epubs. While doing so I noticed that this reader does not seem to support vertical text like this

image

Can you add this or am I maybe missing something?

johnfactotum commented 1 month ago

Yes, it does support vertical writing. For example you can try opening the Kusamakura sample from the EPUB 3 Samples Project.

CaptainDario commented 1 month ago

Is there something I can do to trigger the mode manually? I tried loading one of my own epubs and it did not display in vertical mode but in horizontal (would actually be a cool feature to toggle between them)

Edit: you added a dot in the end of the first link which breaks it

CaptainDario commented 1 month ago

I tried the epub you mentioned and indeed it displays in vertical mode. What could be the reason that my epub does not show in vertical mode?

johnfactotum commented 1 month ago

The book needs to set the writing-mode property to vertical-rl on the root element.

CaptainDario commented 1 month ago

Ah, I see, thank you! I guess I can just toggle this manually via code to switch between the layouts?

johnfactotum commented 1 month ago

Currently you can't change it after the section has been loaded. You can change it in the load event (a custom event of <foliate-paginator> and <foliate-view>), but if you change it at any later point, it won't work properly.

CaptainDario commented 1 month ago

That's perfectly fine for my use case, thank you!