Open streamg opened 7 months ago
Are you able to reproduce this issue with a highlight in the stock Test App? I'll reopen the issue if that's the case.
I believe the issue is caused by the strategy you used to produce the DOM range from the locator in your caching PR: https://github.com/readium/swift-toolkit/pull/354 I'll answer with more details on the PR.
I'm reopening, I tested myself and could notice the same problem with a highlight.
It looks like an issue in WebKit when using ::first-letter
and getBoundingClientRects()
which is used to layout the decorations.
You can reproduce it from the Safari Web Inspector:
const r = window.getSelection().getRangeAt(0)
r.getBoundingClientRect()
-> DOMRect {x: 197, y: 247, ...}
::first-letter
on this paragraph. You can change only the text color which should not impact the position at all.x
is shifted for some reason: r.getBoundingClientRect()
-> DOMRect {x: 212, y: 247, ...}
.I don't think we can address this in the toolkit without removing the ::first-letter
pseudo-elements.
By the way it doesn't happen on your other sample because it doesn't use ::first-letter
but a <span>
element. In case you have control over the authoring...
Bug Report
When applying decorations to ranges that are within a paragraph that starts with a character that has a different font, the decorations are shifted with one character.
What happened?
Taking the first paragraph from a epub source file:
You can notice that the letter E is formatted differently. Because of that when applying a decoration on any of the words in this paragraph the decoration will be shifted with one character.![IMG_A2656292FF4C-1](https://github.com/readium/swift-toolkit/assets/25362002/6d27561a-34fa-4265-9cdb-0e620d89f011)
Example of a decoration described by locator:
Another issue us if we select a word from that paragraph. The selection Locator will describe the text but the
after
field has an additional character (the last character from the highlight). E.g. selecting the word "Harry" will return this Locator for the selection:Please find a sample epub here: 9780593383865_ewyrds_preview.epub.zip
The chapter name is
05_Chapter_1_Styles_in_E.xhtml
Expected behavior
The decorations should be properly applied and the current selection should return the correct locator.
How to reproduce?
Apply decorations for words in the mentioned paragraph and read the
currentSelection.locator
by selecting a word in the same paragraph.Environment
Development environment
macOS: 13.5.1 platform: arm64 carthage: Xcode 14.3 Build version 14E222b
Testing device
iOS version: 16.6.1 (not OS related) Model (e.g. iPhone 11 Pro Max): iPhone 12 Is it an emulator? No
Additional context