fix: correctly decorators for vertical scrolling pages

[shovel-kun]

This PR fixes decorators on vertical scrolling pages.

I've decided to expose the writing-mode of a decorator's text range by using a data attribute for styling customizability.

adding_decorators.webm

editing_decorators.webm

[Copilot]

Pull Request Overview

This PR fixes decorator styling for vertical scrolling pages by exposing the writing mode via data attributes and refactoring CSS inline generation.

• In HtmlDecorationTemplate.kt, the CSS string concatenation is replaced with a buildString block and the styles for different writing modes are added.
• In decorator.js, attribute assignments and element positioning logic are updated to account for vertical writing modes.

Reviewed Changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.

File	Description
readium/navigator/src/main/java/org/readium/r2/navigator/html/HtmlDecorationTemplate.kt	Refactored CSS generation using buildString and added style rules for vertical writing modes.
readium/navigator/src/main/assets/_scripts/src/decorator.js	Updated attribute assignment to use dataset properties and adjusted positioning logic for vertical scrolling.

[mickael-menu]

Thank you @shovel-kun, this is working great!

[qnga]

Hello,
In your fix, you treat vertical RL as a special case. Aren't your changes required for vertical LR as well?

[shovel-kun]

@qnga Good catch, I've included changes for vertical LR.

You can find the Mongolian EPUB example used in the screenshots below here: readium/swift-toolkit#516

Rtl

Ltr MONGOLIAN

EDIT: I've also fixed incorrect bounds layout on vertical RTL, the notes annotation is now correctly aligned above in test app.

[qnga]

Great work, thanks a lot!

[mickael-menu]

Thank you for making the changes 🙏