Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Formats > Workshop

Notices

Reply
 
Thread Tools Search this Thread
Old 04-09-2019, 04:52 AM   #1
GrannyGrump
Obsessively Dedicated...
GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.
 
GrannyGrump's Avatar
 
Posts: 2,038
Karma: 18599999
Join Date: May 2011
Location: JAPAN (US expatriate)
Device: Sony PRS-T2, ADE on PC
Looking for old thread about images "side-by-side"

I vaguely remember a thread about displaying images side-by-side, by using display: table-cell, and the two adjacent cells would dynamically adjust to the image widths. I was hoping for some details of how to tweak such.

Unfortunately my pitiful search skills have not tracked it down. Senior moments all day today!

Does anybody remember this?
GrannyGrump is offline   Reply With Quote
Old 04-09-2019, 07:46 AM   #2
RbnJrg
Wizard
RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.
 
Posts: 1,027
Karma: 3777777
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Quote:
Originally Posted by GrannyGrump View Post
I vaguely remember a thread about displaying images side-by-side, by using display: table-cell, and the two adjacent cells would dynamically adjust to the image widths. I was hoping for some details of how to tweak such.

Unfortunately my pitiful search skills have not tracked it down. Senior moments all day today!

Does anybody remember this?
Old thread? It was just three weeks ago

https://www.mobileread.com/forums/sh...4&postcount=21

That was for Kindle. If you are planning to use it in epub, use a real table. Post again if you have some issues to implement that (with real tables).

Regards
Rubén

Last edited by RbnJrg; 04-09-2019 at 07:48 AM.
RbnJrg is offline   Reply With Quote
Advert
Old 04-09-2019, 09:05 AM   #3
patrik
Evangelist
patrik can differentiate black from dark navy bluepatrik can differentiate black from dark navy bluepatrik can differentiate black from dark navy bluepatrik can differentiate black from dark navy bluepatrik can differentiate black from dark navy bluepatrik can differentiate black from dark navy bluepatrik can differentiate black from dark navy bluepatrik can differentiate black from dark navy bluepatrik can differentiate black from dark navy bluepatrik can differentiate black from dark navy bluepatrik can differentiate black from dark navy blue
 
Posts: 410
Karma: 13280
Join Date: Jan 2010
Location: Sweden
Device: Kobo Aura HD, Pocketbook InkPad 3
(If I may hijack the thread a bit... Every now and then I take a peek into some of the books in the library (mostly by GrannyGrump) to learn and get inspiration how to do things. But I have yet to find any that contains plenty of images in various sizes used in different ways. Any tips?)
patrik is offline   Reply With Quote
Old 04-09-2019, 06:16 PM   #4
RbnJrg
Wizard
RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.
 
Posts: 1,027
Karma: 3777777
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Quote:
Originally Posted by patrik View Post
(If I may hijack the thread a bit... Every now and then I take a peek into some of the books in the library (mostly by GrannyGrump) to learn and get inspiration how to do things. But I have yet to find any that contains plenty of images in various sizes used in different ways. Any tips?)
"Three men in a boat" by Jerome K. Jerome:

https://www.mobileread.com/forums/sh...ad.php?t=48377

And all other books from Jerome are full illustrated. Granny did a great job with them. But you only will be able to do magic with images only by working with epub3 and css3:

https://www.mobileread.com/forums/sh...d.php?t=315647

Last edited by RbnJrg; 04-09-2019 at 06:19 PM.
RbnJrg is offline   Reply With Quote
Old 04-09-2019, 10:14 PM   #5
GrannyGrump
Obsessively Dedicated...
GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.
 
GrannyGrump's Avatar
 
Posts: 2,038
Karma: 18599999
Join Date: May 2011
Location: JAPAN (US expatriate)
Device: Sony PRS-T2, ADE on PC
Thank you Rubén. I said the day was full of senior moments, I guess it was even more severe than I thought.

@patrik -- If you are working with epub2, take a look at Jellby's "Tom Sawyer" for some creative css (I stole some of his ideas to use for "Huckleberry Finn" and "Roughing It")
https://www.mobileread.com/forums/sh...d.php?t=135679
GrannyGrump is offline   Reply With Quote
Advert
Old 04-10-2019, 12:52 AM   #6
BetterRed
null operator
BetterRed ought to be getting tired of karma fortunes by now.BetterRed ought to be getting tired of karma fortunes by now.BetterRed ought to be getting tired of karma fortunes by now.BetterRed ought to be getting tired of karma fortunes by now.BetterRed ought to be getting tired of karma fortunes by now.BetterRed ought to be getting tired of karma fortunes by now.BetterRed ought to be getting tired of karma fortunes by now.BetterRed ought to be getting tired of karma fortunes by now.BetterRed ought to be getting tired of karma fortunes by now.BetterRed ought to be getting tired of karma fortunes by now.BetterRed ought to be getting tired of karma fortunes by now.
 
Posts: 12,759
Karma: 10793226
Join Date: Mar 2012
Location: Sydney Australia
Device: none
Quote:
Originally Posted by GrannyGrump View Post
Thank you Rubén. I said the day was full of senior moments, I guess it was even more severe than I thought.
here you go

BR
BetterRed is offline   Reply With Quote
Old 04-10-2019, 03:12 AM   #7
GrannyGrump
Obsessively Dedicated...
GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.
 
GrannyGrump's Avatar
 
Posts: 2,038
Karma: 18599999
Join Date: May 2011
Location: JAPAN (US expatriate)
Device: Sony PRS-T2, ADE on PC
Oh, this is great! We can just plug ourselves into chargers, and Bob's yer uncle.

Where can I sign up?

GrannyGrump is offline   Reply With Quote
Old 04-10-2019, 05:35 AM   #8
patrik
Evangelist
patrik can differentiate black from dark navy bluepatrik can differentiate black from dark navy bluepatrik can differentiate black from dark navy bluepatrik can differentiate black from dark navy bluepatrik can differentiate black from dark navy bluepatrik can differentiate black from dark navy bluepatrik can differentiate black from dark navy bluepatrik can differentiate black from dark navy bluepatrik can differentiate black from dark navy bluepatrik can differentiate black from dark navy bluepatrik can differentiate black from dark navy blue
 
Posts: 410
Karma: 13280
Join Date: Jan 2010
Location: Sweden
Device: Kobo Aura HD, Pocketbook InkPad 3
(Thank you kindly RbnJrg and GrannyGrump! )
patrik is offline   Reply With Quote
Old 04-10-2019, 07:39 AM   #9
RbnJrg
Wizard
RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.
 
Posts: 1,027
Karma: 3777777
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Quote:
Originally Posted by GrannyGrump View Post
Thank you Rubén. I said the day was full of senior moments, I guess it was even more severe than I thought.
You are welcome Granny. And my words were a joke ; you are a granny, but of young years.
RbnJrg is offline   Reply With Quote
Old 04-10-2019, 08:15 AM   #10
BetterRed
null operator
BetterRed ought to be getting tired of karma fortunes by now.BetterRed ought to be getting tired of karma fortunes by now.BetterRed ought to be getting tired of karma fortunes by now.BetterRed ought to be getting tired of karma fortunes by now.BetterRed ought to be getting tired of karma fortunes by now.BetterRed ought to be getting tired of karma fortunes by now.BetterRed ought to be getting tired of karma fortunes by now.BetterRed ought to be getting tired of karma fortunes by now.BetterRed ought to be getting tired of karma fortunes by now.BetterRed ought to be getting tired of karma fortunes by now.BetterRed ought to be getting tired of karma fortunes by now.
 
Posts: 12,759
Karma: 10793226
Join Date: Mar 2012
Location: Sydney Australia
Device: none
Quote:
Originally Posted by GrannyGrump View Post
Oh, this is great! We can just plug ourselves into chargers, and Bob's yer uncle.
I'd need a triple phase charger
BetterRed is offline   Reply With Quote
Old 04-15-2019, 12:11 PM   #11
kso
Enthusiast
kso began at the beginning.
 
Posts: 33
Karma: 10
Join Date: Jun 2018
Location: UK
Device: kindle fire
@GrannyGrump:

Hello young lady

I'm the OP who had the question about images appearing differently in the Kindle previewers 2.9 and 3.29 (some time ago), which led to Rubén handing me the solution on a silver platter: using CSS tables.

For the moment I've decided to use this in the Kindle HTML _only_, as it's not _needed_ for EPUBs and, due to Adobe Digital Editions (ADE) readers blowing a fuse when faced with @media queries, it would actually be a limitation when using small screens such as early smartphones.

I now use full width images by default, and "only" readers reacting appropriately to @media queries see code that displays images in CSS tables for screens that are wide enough (I say "only", but in fact it works on most of the readers I tried).

In my Kindle CSS file I first have the full width image code, followed by @media queries. This works well on the devices I have access to and in both previewers 2.9 and 3.29.1.

For EPUBs I use a secondary CSS file because of ADE. As soon as ADE sees a @media query it ignores the file completely.

If I use CSS tables without @media queries ADE 3.0 totally destroys the display (it overlays all the images into a neat stack so that you see only the topmost two images and possibly fragments of the others depending on their size), and ADE 4.5 did something else that requires either a thick skin or a lot of good natured humour.

So here's the HTML code, first for EPUBs followed by Kindle's:

EPUB:

Quote:
<div class="imgcatrow">
<div class="stblk62 stblkfbl">
<img class="stimgfit" src="../img/large.jpg" alt="" />
<span class="stblkcaption">Caption</span>
</div>
<div class="stblk38 stblkfbr">
<img class="stimgfit" src="../img/small.jpg" alt="" />
<span class="stblkcaption">Caption</span>
</div>
</div>
<div class="imgcatrow">
<div class="stblk38 stblkfbl">
<img class="stimgfit" src="../img/small.jpg" alt="" />
<span class="stblkcaption">Caption</span>
</div>
<div class="stblk62 stblkfbr">
<img class="stimgfit" src="../img/large.jpg" alt="" />
<span class="stblkcaption">Caption</span>
</div>
</div>
And the HTML for Kindles:

Quote:
<div class="imgcattable"> <! -- Kindle only -->
<div class="imgcatrow">
<div class="stblk62 stblkfbl">
<div class="kfix"> <! -- Kindle only -->
<img class="stimgfit" src="../img/large.jpg" alt="" />
<span class="stblkcaption">Caption</span>
</div>
</div>
<div class="stblk38 stblkfbr">
<div class="kfix"> <! -- Kindle only -->
<img class="stimgfit" src="../img/small.jpg" alt="" />
<span class="stblkcaption">Caption</span>
</div>
</div>
</div>
</div>
<div class="imgcattable">
<div class="imgcatrow">
<div class="stblk38 stblkfbl">
<div class="kfix">
<img class="stimgfit" src="../img/small.jpg" alt="" />
<span class="stblkcaption">Caption</span>
</div>
</div>
<div class="stblk62 stblkfbr">
<div class="kfix">
<img class="stimgfit" src="../img/large.jpg" alt="" />
<span class="stblkcaption">Caption</span>
</div>
</div>
</div>
</div>
CSS:

Both use some utility classes such as .stblkfbl (floats an object to the left), .stblkfbr (floats right) and .stimgfit (fits an image to 100% of its wrapper. For the sake of brevity I have removed some of the settings such as margins etc.


EPUB CSS:

Quote:
.imgcatrow {
overflow:auto;
clear:both;
}
.imgcatrow .stblk38, .imgcatrow .stblk62 {
width:100%;
clear:both;
}
EPUB CSS with @media queries:

Quote:
/* this file is loaded by EPUB only, but ignored by adobe digital editions */
/* and readers based on Adobe's RMSDK because they dont't do @media queries. */

@media all and (min-width: 480px) {
.imgcatrow .stblk38 {
width:36%;
}
.imgcatrow .stblk62 {
width:60% !important;
}
.imgcatrow .stblkfbl.stblk62 {
margin-right:2% !important;
}
.imgcatrow .stblkfbr.stblk62 {
margin-left:2% !important;
}
.imgcatrow .stblkfbl, .imgcatrow .stblkfbr {
clear:none;
}
}
Kindle CSS:

Quote:
@media amzn-kf8 {
.imgcattable {
display: table;
width: 100%;
}
.imgcatrow {
display:table-row;
}
.imgcatrow .stblkfbl, .imgcatrow .stblkfbr {
display:table-cell;
vertical-align:top !important;
float:none !important;
}
.imgcatrow .stblk62 {
width:60% !important;
}
.imgcatrow .stblk38 {
width:38% !important;
}
.imgcattable img {
display:block !important;
width: 100%;
}
span.stblkcaption {
display:block;
}
}
Klaus
kso is offline   Reply With Quote
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Library doesn't work, eInk side stuck with "Home" screen andr2k enTourage eDGe 4 08-04-2012 08:37 AM
"The Third Side" - Battle for the Solar System, Book 2 StephenJSweeney Self-Promotions by Authors and Publishers 10 09-01-2011 02:59 AM
Side by side images - argh. LostSock Sigil 7 07-22-2011 10:21 AM
converting to "same" format - any side effects? cybmole Calibre 17 09-20-2010 07:16 AM


All times are GMT -4. The time now is 12:22 PM.


MobileRead.com is a privately owned, operated and funded community.