search

jcklie / anki-maobi

máobĭ (毛笔) is an Anki add-on to create cards with writing quizzes for Hanzi (Chinese characters)
MIT License
47 stars 7 forks source link

Offset pen position when zoom≠1 #41

Open khonkhortisan opened 3 years ago

khonkhortisan commented 3 years ago

Describe the bug I use javascript to zoom the page to fit so that I never have to modify the font size based on how much text there is, and maobi expects the size of the character box to not change,

To Reproduce Steps to reproduce the behavior:

  1. increase zoom level through either html <body class="card card1 isWin" style="zoom:2;"> or css body {zoom:2;}. The addon AnkiWebView Inspector can help with this.
  2. draw in the top-left corner of of the character box

If possible, attach a minimal file that triggers the error. MaobiWithZoom.apkg.txt imagen

Expected behavior I'd have to take longer strokes for it to fit

Actual behavior the ink is in the bottom-right quadrant when I draw in the top-left quadrant, making it think I drew in the wrong place, flashing the correct stroke in blue over where I just attempted to draw

Please complete the following information:

Additional context decreasing the zoom on character-target-div by the same amount through html <div id="character-target-div" style="zoom:0.5;"> or css #character-target-div {zoom:0.5;} hides the problem again.

jcklie commented 3 years ago

Thank you for reporting. There is no easy way to detect when you are zoomed in. If you have a way, then I am happy to merge your PR. You can also open an issue with HanziWriter, we use their JS for the writing editor.

khonkhortisan commented 3 years ago

I didn't find a normal way for a page to zoom to fit, so I'm using Content Injector to add this mess to every card _global2.js.txt I worked around it by applying the inverse zoom to character-target-div when I apply the page zoom. document.getElementById('character-target-div').style.zoom="calc(1/"+document.getElementsByClassName('card')[0].style.zoom+")"; so body may be at zoom 2.7638 while character-target-div is at 0.361821 This bug still exists, but no longer gets in my way. If I want to independently change the size of the box, I use the size variable that comes with the addon. If I want to zoom the page, I inversely zoom the box at the same time. If if was as simple as getting .style.zoom that would be easy, but it looks like it would involve multiplying the zoom levels of all parent elements, if not also browser-level zoom. Or reading the displayed width directly. Ah, it also has a problem with transform:scale() according to https://github.com/chanind/hanzi-writer/issues/172