MobileRead Forums - View Single Post

kso · 03-08-2019, 08:49 AM

Ok, let me rephrase "total crap" in my OP to "using a very liberal artistic license".

I have two different sets of CSS instructions, let's call one "old" and the other one "new". The old code doesn't use anything fancy or tricky and is based on best practice on the web. The new one uses work-arounds for things the previewer 3.29 can't (yet?) do, namely floating elements within a container in two different directions.

The old code shows what I expect everywhere except in the Previewer 3.29.

The new code displays as expected in the previewer 2.9 for all devices but the Voyage, plus in 3.29 (I haven't tested the new code any web browser or EPUB reader because the current (old) one works and I fear the new code is fragile).

What I'm trying to do is to have an image gallery showing two images in a row*), one occupying about two thirds of the width, the other one a third with a tiny gap in between. I alternate large and small from left to right to liven things up.

To do this I have a DIV (the row) spanning the total width, with two DIVs inside as container for the images plus optional caption. The inner DIVs are scaled to percentages of the row DIV. The images are scaled to 100% width of the inner DIV with the height set to "auto" to keep the aspect ratio. No magic involved.

See screen shots below (I had to use two images for the oldcss 3.29 preview to show the clearly how the page is formed).

Now, and this is the reason why it took me a while to reply, I had an idea this morning. Because the effect seen on the new CSS code Voyage image, that the smaller image is tucked into to the top right corner of the large one when (and only then) the large image is positioned left and the smaller one should be on the right, I asked myself: what happens, if I use the new CSS code, and set both widths to one half of the available space.

Bingo - ish.

With 50:50 and no gap, and 49%, 2% gap and another 49%, the CSS is interpreted correctly and the images are scaled and positioned the way they should be.

Same for 48-2-50, 47-2-51, 46-2-52 and so on ... all the way to 42-2-56, which fails.

Which leads me to believe this is a bug in the 2.9 previewer using freedom of expression when parsing numeric values. I tried reducing the gap in between, which didn't make any difference

Now the question really boils down to: is the preview for the Voyage 2.9 correct or just a fluke.

@Hitch: I see from your remark that you have a Voyage. If I upload a small sample mobi would you be able to load this onto your Voyage and see where the smoke comes out?

Thanks

Klaus

*) on Phones and tiny devices images are shown just stacked vertically.

03-08-2019, 08:49 AM	#4
kso Enthusiast Posts: 47 Karma: 10 Join Date: Jun 2018 Location: UK Device: Android, iPad, iPod, kindle {keyboard,fire7,hdx8.9} kobo, Sony PRS 600	Ok, let me rephrase "total crap" in my OP to "using a very liberal artistic license". I have two different sets of CSS instructions, let's call one "old" and the other one "new". The old code doesn't use anything fancy or tricky and is based on best practice on the web. The new one uses work-arounds for things the previewer 3.29 can't (yet?) do, namely floating elements within a container in two different directions. The old code shows what I expect everywhere except in the Previewer 3.29. The new code displays as expected in the previewer 2.9 for all devices but the Voyage, plus in 3.29 (I haven't tested the new code any web browser or EPUB reader because the current (old) one works and I fear the new code is fragile). What I'm trying to do is to have an image gallery showing two images in a row), one occupying about two thirds of the width, the other one a third with a tiny gap in between. I alternate large and small from left to right to liven things up. To do this I have a DIV (the row) spanning the total width, with two DIVs inside as container for the images plus optional caption. The inner DIVs are scaled to percentages of the row DIV. The images are scaled to 100% width of the inner DIV with the height set to "auto" to keep the aspect ratio. No magic involved. See screen shots below (I had to use two images for the oldcss 3.29 preview to show the clearly how the page is formed). Now, and this is the reason why it took me a while to reply, I had an idea this morning. Because the effect seen on the new CSS code Voyage image, that the smaller image is tucked into to the top right corner of the large one when (and only then) the large image is positioned left and the smaller one should be on the right, I asked myself: what happens, if I use the new CSS code, and set both widths to one half of the available space. Bingo - ish. With 50:50 and no gap, and 49%, 2% gap and another 49%, the CSS is interpreted correctly and the images are scaled and positioned the way they should be. Same for 48-2-50, 47-2-51, 46-2-52 and so on ... all the way to 42-2-56, which fails. Which leads me to believe this is a bug in the 2.9 previewer using freedom of expression when parsing numeric values. I tried reducing the gap in between, which didn't make any difference Now the question really boils down to: is the preview for the Voyage 2.9 correct or just a fluke. @Hitch: I see from your remark that you have a Voyage. If I upload a small sample mobi would you be able to load this onto your Voyage and see where the smoke comes out? Thanks Klaus ) on Phones and tiny devices images are shown just stacked vertically. Attached Thumbnails