05-21-2013, 06:10 AM | #1 |
Wizard
Posts: 2,608
Karma: 3000161
Join Date: Jan 2009
Device: Kindle PW3 (wifi)
|
Bird display on the side of a text page
Hi
From time to time, I bump on these kinds of things. I'd like to find a practical solution for this one: As you can see, It's a bird (head + tail) placed in the green area and standing on the left side of a page. My dream would be to know how to wrap the text around (intended light blue display). I even cut the bird in two pieces and tried to stick the pieces together but I failed miserably (it worked for one font-size, but increase it and the tail goes away... ) Would somebody accept to publish here the relevant code? Last edited by roger64; 05-21-2013 at 06:17 AM. |
05-21-2013, 07:19 AM | #2 |
Wizard
Posts: 4,520
Karma: 121692313
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-T1, Kobo Touch, Kobo Aura
|
I know in the Alice in Wonderland book these kind of things are done. However, I never got it to work and validate.
|
Advert | |
|
05-21-2013, 09:10 AM | #3 |
Wizard
Posts: 2,608
Karma: 3000161
Join Date: Jan 2009
Device: Kindle PW3 (wifi)
|
mistake
Last edited by roger64; 05-21-2013 at 04:33 PM. Reason: double post |
05-21-2013, 09:35 AM | #4 |
Wizard
Posts: 2,608
Karma: 3000161
Join Date: Jan 2009
Device: Kindle PW3 (wifi)
|
@Toxaris
Thanks. Indeed, there are two images of this kind in this book (numbered 23 et 41). I will try to copy from them. If I succeed, I will post the code here with some comments. I said: "If"... |
05-21-2013, 09:56 AM | #5 | |
Well trained by Cats
Posts: 29,801
Karma: 54830978
Join Date: Aug 2009
Location: The Central Coast of California
Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A
|
Quote:
https://www.mobileread.com/forums/sho...9&postcount=11 If yo look at the attachment in the linked message , it can be done |
|
Advert | |
|
05-21-2013, 10:21 AM | #6 |
Wizard
Posts: 4,520
Karma: 121692313
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-T1, Kobo Touch, Kobo Aura
|
Yes, I know that thread. However, I do not get it to work and keep it validated though.
|
05-21-2013, 10:35 AM | #7 |
Color me gone
Posts: 2,089
Karma: 1445295
Join Date: Apr 2008
Location: Central Oregon Coast
Device: PRS-300
|
I wonder if it was a Sony quirk.
|
05-21-2013, 11:57 AM | #8 |
Well trained by Cats
Posts: 29,801
Karma: 54830978
Join Date: Aug 2009
Location: The Central Coast of California
Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A
|
|
05-21-2013, 05:56 PM | #9 |
Wizard
Posts: 1,542
Karma: 6613969
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Something like this:?
https://www.mobileread.com/forums/att...1&d=1369173498 I made it with the following classes: Code:
p { text-align: justify; margin: 0; } .parrot { background: url(../Images/bird.jpg) no-repeat top left; background-size: 183px 307px; /* the half of 366px and 614px*/ } .box1 { float: left; top: 0; left: 0; width: 183px; /* the half of the original width: 366px;*/ height: 195px; /* the half of the original height: 390px; (for the square section of the img */ } .box2 { clear: left; float: left; top: 0; left: 0; width: 60px; /*120px;*/ height: 100px; /*200px;*/ } Code:
<p>...something...</p> <div class="parrot"> <p class="box1"></p> <p class="box2"></p> <p>...something...</p> </div> Regards Rubén Last edited by RbnJrg; 05-21-2013 at 09:29 PM. |
05-21-2013, 06:19 PM | #10 |
Color me gone
Posts: 2,089
Karma: 1445295
Join Date: Apr 2008
Location: Central Oregon Coast
Device: PRS-300
|
This is what happens in the Sony Reader Library.
It bleeds over. |
05-21-2013, 07:08 PM | #11 |
Wizard
Posts: 1,542
Karma: 6613969
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
|
05-21-2013, 07:42 PM | #12 |
Resident Curmudgeon
Posts: 73,976
Karma: 128903378
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
It does not work in ADE 1.7.2 or ADE 2.0.
|
05-21-2013, 07:54 PM | #13 |
Wizard
Posts: 1,542
Karma: 6613969
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Well, the problem in the Sony Reader is that the reader doesn't resize the image. The original image was 366px x 614px and in the css code I used the half of that size. But Sony Reader still uses the original size so it ignores the property background-size. I resized the image manually before using it in the .epub and I got the following results in Sony Reader:
Last edited by RbnJrg; 05-21-2013 at 09:30 PM. |
05-21-2013, 08:03 PM | #14 |
Wizard
Posts: 1,542
Karma: 6613969
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Hi JSWolf;
After resizing manually the original image before using in the .epub (see my last version of it), I got the following result in ADE 2.0.67532. So the solution is to use an image of the desired size and not to use css in order to resize it (in Kindle works with any size of image). Last edited by RbnJrg; 05-21-2013 at 09:31 PM. |
05-22-2013, 01:55 AM | #15 |
Wizard
Posts: 2,608
Karma: 3000161
Join Date: Jan 2009
Device: Kindle PW3 (wifi)
|
@RbnJrg
Hi Jorge Thanks so much for your help. I have really spent hours trying to do it and had given up. Your EPUB looks good. I will study it closely and look how it displays on Kobo and later how it goes to PDF with Prince. ADE is OK. Prince too. The only thing, Kobo does not agree (text mixes with image), but Kobo is backward on so many fields with formatting, I find it hardly surprising. The code cannot be more compact and clearer. Use of background, background-size (I noted for this one to be careful) and boxes is really very convenient. Last edited by roger64; 05-22-2013 at 02:52 AM. |
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
Need help w/very simple task: page of Word text > Kindle text I can share w/friends | kearnine | Conversion | 1 | 10-17-2012 08:25 PM |
Problems with cover display for side-loaded books | Cameronpaterson | Kobo Tablets | 7 | 02-01-2012 07:18 AM |
Using table side as secondary display for laptop | mduijkers | enTourage Archive | 4 | 12-15-2010 04:44 PM |
K1 and K2 text side-by-side via scanner | daffy4u | Amazon Kindle | 40 | 03-05-2009 09:55 AM |
PRS-500 What should the Total Page Count text display? | Nogg | Sony Reader Dev Corner | 8 | 09-07-2007 07:04 PM |