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-15-2021, 02:56 AM   #1
Leonatus
Wizard
Leonatus ought to be getting tired of karma fortunes by now.Leonatus ought to be getting tired of karma fortunes by now.Leonatus ought to be getting tired of karma fortunes by now.Leonatus ought to be getting tired of karma fortunes by now.Leonatus ought to be getting tired of karma fortunes by now.Leonatus ought to be getting tired of karma fortunes by now.Leonatus ought to be getting tired of karma fortunes by now.Leonatus ought to be getting tired of karma fortunes by now.Leonatus ought to be getting tired of karma fortunes by now.Leonatus ought to be getting tired of karma fortunes by now.Leonatus ought to be getting tired of karma fortunes by now.
 
Leonatus's Avatar
 
Posts: 1,022
Karma: 10963125
Join Date: Mar 2013
Location: Guben, Brandenburg, Germany
Device: Kobo Clara 2E, Tolino Shine 3
Absolute positioning of text into image

i have a book that starts each chapter with an angled image, containing the initial letter of the chapter (see img01). In order to apply the text to that initial letter, I had to position it absolute.
That renders quite nice: see img02. Text is not copyrighted!
!When i continue with "normal" text, however, it will overlap the <div> text of the absolute positioned part, due to the absolute positioning (see img03).
The code view looks like this:
Code:
<body>
<div class="container">
  <img src="../Images/img01.jpg" alt="img01"/>
  <div class="top-left">rüben im Buchenkretscham durchmaß der Wirt die einsame Gaststube.</div><div class="side-left">Er war wohl in schwerer Erregung. An allen Tischen blieb er stehen und trommelte mit den dicken, kurzen Fingern darauf. Immer lockte es ihn ans Fenster, und er hatte doch nicht den Mut, ganz nahe hinzutreten. Die Augen aber richteten sich immer aufs neue nach dem Buchenhofe. So vertieft war er in seine Gedanken und in das Anschauen des stattlichen Gehöftes, dass er nicht einmal bemerkte, wie sich die Tür öffnete und ein Mann erschien, der ihn sekundenlang beobachtete.</div>
<p>»Eine wunderschöne Besitzung, der Buchenhof, was, Schräger?«</p>

<p>»Ah – ah – ja – ja – natürlich – natürlich; ach, du bist’s, Berger, du hast mich ja –«</p>

<p>»So erschreckt, gelt ja? Hähä! Is kaum zu glauben, dass ’n Gastwirt erschrickt, wenn a Gast kommt.«</p>

<p>»Ich – ich dachte gerade nur –«</p>

<p>»Du dachtest gerade nur darüber nach, was doch der Buchenhof für ’ne riesig hübsche Wirtschaft wär’, und da kam ich dummerweise und störte dich in deiner Andacht.«</p>


<p>»Bist doch halt a gespaßiger Mensch, Berger. Immer weißte ’n Witz. Was kann ich dir denn einschenken?«</p>

<p>»Gar nischt! Ich will dich bloß was fragen, Schräger. – – Weiß er’s schon?« Und er zeigte mit dem Daumen nach dem Buchenhofe.</p>

<p>»Was – was soll er denn wissen?«</p></div>
</body>
The css is this:
Code:
.container {
  position: relative;
  text-align: justify;
  color: black;
}
.top-left {
  position: absolute;
  top: 270px;
  left: 230px;
}
.side-left {
  position: absolute;
  top: 305px;
  left: 90px;
}
Is there a way out of the problem?
Attached Thumbnails
Click image for larger version

Name:	img01.jpg
Views:	245
Size:	95.7 KB
ID:	186621   Click image for larger version

Name:	img02.jpg
Views:	246
Size:	169.8 KB
ID:	186622   Click image for larger version

Name:	img03.jpg
Views:	248
Size:	206.9 KB
ID:	186623  
Leonatus is offline   Reply With Quote
Old 04-15-2021, 09:30 AM   #2
jhowell
Grand Sorcerer
jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.
 
jhowell's Avatar
 
Posts: 6,465
Karma: 84000001
Join Date: Nov 2011
Location: Tampa Bay, Florida
Device: Kindles
Perhaps you could split the image into two parts, the frame and the letter. Then you could make the frame a background image in the top/left margin and use the letter image as a raised or drop cap. That would allow you to have the text just flow normally.
jhowell is offline   Reply With Quote
Advert
Old 04-15-2021, 10:10 AM   #3
Turtle91
A Hairy Wizard
Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.
 
Turtle91's Avatar
 
Posts: 3,059
Karma: 18727053
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
I don't do much with ePub 3 but I think they have a function that allows you to make shapes for the text to flow around. Set the whole image as a background image, then set the shape(s) to cover the initial letter and frame???
Turtle91 is offline   Reply With Quote
Old 04-15-2021, 10:35 AM   #4
jhowell
Grand Sorcerer
jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.
 
jhowell's Avatar
 
Posts: 6,465
Karma: 84000001
Join Date: Nov 2011
Location: Tampa Bay, Florida
Device: Kindles
Quote:
Originally Posted by Turtle91 View Post
I don't do much with ePub 3 but I think they have a function that allows you to make shapes for the text to flow around.
That feature is shape-outside. I don't know how well supported it is in e-book readers.
jhowell is offline   Reply With Quote
Old 04-15-2021, 10:40 AM   #5
Leonatus
Wizard
Leonatus ought to be getting tired of karma fortunes by now.Leonatus ought to be getting tired of karma fortunes by now.Leonatus ought to be getting tired of karma fortunes by now.Leonatus ought to be getting tired of karma fortunes by now.Leonatus ought to be getting tired of karma fortunes by now.Leonatus ought to be getting tired of karma fortunes by now.Leonatus ought to be getting tired of karma fortunes by now.Leonatus ought to be getting tired of karma fortunes by now.Leonatus ought to be getting tired of karma fortunes by now.Leonatus ought to be getting tired of karma fortunes by now.Leonatus ought to be getting tired of karma fortunes by now.
 
Leonatus's Avatar
 
Posts: 1,022
Karma: 10963125
Join Date: Mar 2013
Location: Guben, Brandenburg, Germany
Device: Kobo Clara 2E, Tolino Shine 3
Quote:
Originally Posted by jhowell View Post
Perhaps you could split the image into two parts, the frame and the letter. Then you could make the frame a background image in the top/left margin and use the letter image as a raised or drop cap. That would allow you to have the text just flow normally.
That's what I had been thinking of first. But it would modify the intention of the bookmaker. However, an option.

Quote:
Originally Posted by Turtle91 View Post
I don't do much with ePub 3 but I think they have a function that allows you to make shapes for the text to flow around. Set the whole image as a background image, then set the shape(s) to cover the initial letter and frame???
About this, I know nothing. I'll give it a try.

Obviously, there is no trick based on HTML/CSS.
Thank you both!
Leonatus is offline   Reply With Quote
Advert
Old 04-15-2021, 11:17 AM   #6
Leonatus
Wizard
Leonatus ought to be getting tired of karma fortunes by now.Leonatus ought to be getting tired of karma fortunes by now.Leonatus ought to be getting tired of karma fortunes by now.Leonatus ought to be getting tired of karma fortunes by now.Leonatus ought to be getting tired of karma fortunes by now.Leonatus ought to be getting tired of karma fortunes by now.Leonatus ought to be getting tired of karma fortunes by now.Leonatus ought to be getting tired of karma fortunes by now.Leonatus ought to be getting tired of karma fortunes by now.Leonatus ought to be getting tired of karma fortunes by now.Leonatus ought to be getting tired of karma fortunes by now.
 
Leonatus's Avatar
 
Posts: 1,022
Karma: 10963125
Join Date: Mar 2013
Location: Guben, Brandenburg, Germany
Device: Kobo Clara 2E, Tolino Shine 3
For reasons that I ignore, the background image appears doubled on the page.
And somewhere I read that using background images in epubs is not recommended.

Edit: The image is even multiplied. It seems that the program tries to cover the whole HTML-file with it.

Last edited by Leonatus; 04-15-2021 at 11:28 AM.
Leonatus is offline   Reply With Quote
Old 04-15-2021, 12:10 PM   #7
Turtle91
A Hairy Wizard
Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.
 
Turtle91's Avatar
 
Posts: 3,059
Karma: 18727053
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
you need to set the repeat setting to no-repeat:
Code:
background-repeat: no-repeat
Turtle91 is offline   Reply With Quote
Old 04-15-2021, 01:41 PM   #8
Leonatus
Wizard
Leonatus ought to be getting tired of karma fortunes by now.Leonatus ought to be getting tired of karma fortunes by now.Leonatus ought to be getting tired of karma fortunes by now.Leonatus ought to be getting tired of karma fortunes by now.Leonatus ought to be getting tired of karma fortunes by now.Leonatus ought to be getting tired of karma fortunes by now.Leonatus ought to be getting tired of karma fortunes by now.Leonatus ought to be getting tired of karma fortunes by now.Leonatus ought to be getting tired of karma fortunes by now.Leonatus ought to be getting tired of karma fortunes by now.Leonatus ought to be getting tired of karma fortunes by now.
 
Leonatus's Avatar
 
Posts: 1,022
Karma: 10963125
Join Date: Mar 2013
Location: Guben, Brandenburg, Germany
Device: Kobo Clara 2E, Tolino Shine 3
Thanks!
But, alas, I realized that the performance on a reader is by far not as good as it appeared first. Probably jhowell's suggestion is the most reliable.
Leonatus is offline   Reply With Quote
Old 04-15-2021, 11:12 PM   #9
Tex2002ans
Wizard
Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.
 
Posts: 2,297
Karma: 12126329
Join Date: Jul 2012
Device: Kobo Forma, Nook
Quote:
Originally Posted by jhowell View Post
That feature is shape-outside. I don't know how well supported it is in e-book readers.
There's also CSS3's "shape-image-threshold":

https://developer.mozilla.org/en-US/...mage-threshold

which allows text to flow around the image's alpha channel.

But like you said... support on actual ereaders... not really there.

* * *

There were a handful of topics over the years discussing floating text around oddly shaped images.

The one I remember was where RbnJrg showed how to get it around an upsidedown L-shaped parrot:

2013: "Bird display on the side of a text page"
2014: "Text wrap around irregular shapes"

Last edited by Tex2002ans; 04-17-2021 at 12:54 AM.
Tex2002ans is offline   Reply With Quote
Old 04-16-2021, 09:08 AM   #10
jhowell
Grand Sorcerer
jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.
 
jhowell's Avatar
 
Posts: 6,465
Karma: 84000001
Join Date: Nov 2011
Location: Tampa Bay, Florida
Device: Kindles
Quote:
Originally Posted by Tex2002ans View Post
But like you said... support on actual ereaders... not really there.
Amazon added the ability to wrap text around arbitrary shapes in KFX format, but have not documented the proprietary markup needed to enable it. I have attached an example screenshot from the Kindle in Motion edition of Dracula.
Attached Thumbnails
Click image for larger version

Name:	Dracula-KIM.jpg
Views:	221
Size:	126.3 KB
ID:	186647  
jhowell is offline   Reply With Quote
Old 04-16-2021, 11:11 AM   #11
Leonatus
Wizard
Leonatus ought to be getting tired of karma fortunes by now.Leonatus ought to be getting tired of karma fortunes by now.Leonatus ought to be getting tired of karma fortunes by now.Leonatus ought to be getting tired of karma fortunes by now.Leonatus ought to be getting tired of karma fortunes by now.Leonatus ought to be getting tired of karma fortunes by now.Leonatus ought to be getting tired of karma fortunes by now.Leonatus ought to be getting tired of karma fortunes by now.Leonatus ought to be getting tired of karma fortunes by now.Leonatus ought to be getting tired of karma fortunes by now.Leonatus ought to be getting tired of karma fortunes by now.
 
Leonatus's Avatar
 
Posts: 1,022
Karma: 10963125
Join Date: Mar 2013
Location: Guben, Brandenburg, Germany
Device: Kobo Clara 2E, Tolino Shine 3
Interesting! In my case, the image is not irregularly shaped; it is rectangular. But the space that is not covered with graphics is simply blank. So I have to write "on" the image.
Leonatus is offline   Reply With Quote
Old 04-16-2021, 11:12 AM   #12
Quoth
the rook, bossing Never.
Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.
 
Quoth's Avatar
 
Posts: 10,650
Karma: 83693763
Join Date: Jun 2017
Location: Ireland
Device: All 4 Kinds: epub eink, Kindle, android eink, NxtPaper11
But does that KIM edition work on ANY eink Kindle?
Quoth is offline   Reply With Quote
Old 04-16-2021, 06:27 PM   #13
jhowell
Grand Sorcerer
jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.
 
jhowell's Avatar
 
Posts: 6,465
Karma: 84000001
Join Date: Nov 2011
Location: Tampa Bay, Florida
Device: Kindles
Quote:
Originally Posted by Leonatus View Post
Interesting! In my case, the image is not irregularly shaped; it is rectangular. But the space that is not covered with graphics is simply blank. So I have to write "on" the image.
That is what shape-outside is for. It defines what part of the rectangular image can be overwritten by text.
jhowell is offline   Reply With Quote
Old 04-16-2021, 06:28 PM   #14
jhowell
Grand Sorcerer
jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.
 
jhowell's Avatar
 
Posts: 6,465
Karma: 84000001
Join Date: Nov 2011
Location: Tampa Bay, Florida
Device: Kindles
Quote:
Originally Posted by Quoth View Post
But does that KIM edition work on ANY eink Kindle?
No, it doesn't. Only the Kindle app on iOS, Android, and Fire tablets.
jhowell is offline   Reply With Quote
Old 04-17-2021, 01:10 AM   #15
Tex2002ans
Wizard
Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.
 
Posts: 2,297
Karma: 12126329
Join Date: Jul 2012
Device: Kobo Forma, Nook
Quote:
Originally Posted by Leonatus View Post
Interesting! In my case, the image is not irregularly shaped; it is rectangular. But the space that is not covered with graphics is simply blank. So I have to write "on" the image.
Yep, like jhowell said, that's what CSS3's shape-outside does. It allows you flow text around all sorts of shapes (like a circle, oval, triangle, or any complicated shape like a star).

And the threshold I mentioned allows you to flow text based on the Alpha (transparency) of the image. So you paint parts of the "L" with a solid background + the large blank spot could be converted to transparent background.

In CSS2, all you can do is just say "float: left/right", and the text flows around the entire rectangle.

There are ways you may be able to hack something together in CSS2, by treating the L-shape image like 2 separate images:

One for the flat/wide rectangle up top, and one for the skinny/tall rectangle to the left.

But it probably wouldn't work on many devices, and may even break on things like cellphones.

See those RbnJrg threads I linked above though. He shows how, and maybe the examples may work in your case.
Tex2002ans 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
Positioning text vertically on a page Nabodita ePub 21 07-04-2017 06:52 AM
Div Tags for Text Positioning for Fixed Layout eBooks for Kindle Fire verydeepwater Kindle Formats 3 02-06-2013 10:48 AM
Image overlayed over text (but text visible if image disabled)? Kaylee Skylyn ePub 5 08-01-2012 05:27 PM
Problem: positioning text to the bottom-right JulienDym ePub 5 07-06-2011 09:03 AM
text and image pimpoum PDF 2 05-31-2009 04:26 AM


All times are GMT -4. The time now is 05:32 AM.


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