Calculating Panel Magnification Offsets for Kindle Comic Books

This is interesting to no one, but on the off-chance some poor jerk is desperately searching the internet for tips like I was, here is the algorithm I came up with:

Map the left corner and right corner of your panel (in percent) using Photoshop.
In your CSS code, your tap target is then:
top: [Vertical displacement of top left corner]
left: [Horizontal displacement of top left corner]
height: [(Vertical displacement of bottom right corner) - top]
width: [(Horizontal displacement of bottom right corner) - left]
Then figure out the size of your panel magnification window by calculating a size ratio (called Ratio, bellow). If you’re going from a 600x1024 to a 900x1536 the size ratio is 900/600 or 1.5.
In your CSS code, define your magnification position and size:
top: [ <= 100 - Mag Window-> height]
left: [<= 100 - Mag Window->width]
height: [Ratio * tap target-> height]
width: [Ratio * tap target-> width]
Then calculate the offsets and put them into your CSS code.
top: -(tap target->top / Window mag-> height) * Ratio
bottom: -(tap target->left / Window mag->width)*Ratio
Notice those negatives. They will most likely need to be there UNLESS you fall into a situation where a dimension of your small image times the corresponding Window mag->top/left is greater than the dimension of your magnified image times the corresponding Tap target->top/left. Basically, this would mean you’re shifting your panel down and to the right, which you probably won’t be doing. However, if a panel looks way incorrect either perform this check or just take out the negative sign in 5. You probably won’t have to worry about this.

You may have to do some minor tweaking, but 95% of your panels will look pretty perfect on the first shot. When I was looking for help all I found was a bunch of folks charging $50 to $100 PER PAGE to do this formatting.

Now you can do it, no prob.