04-15-2021, 02:56 AM | #1 |
Wizard
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> 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; } |
04-15-2021, 09:30 AM | #2 |
Grand Sorcerer
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.
|
Advert | |
|
04-15-2021, 10:10 AM | #3 |
A Hairy Wizard
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???
|
04-15-2021, 10:35 AM | #4 | |
Grand Sorcerer
Posts: 6,465
Karma: 84000001
Join Date: Nov 2011
Location: Tampa Bay, Florida
Device: Kindles
|
Quote:
|
|
04-15-2021, 10:40 AM | #5 | ||
Wizard
Posts: 1,022
Karma: 10963125
Join Date: Mar 2013
Location: Guben, Brandenburg, Germany
Device: Kobo Clara 2E, Tolino Shine 3
|
Quote:
Quote:
Obviously, there is no trick based on HTML/CSS. Thank you both! |
||
Advert | |
|
04-15-2021, 11:17 AM | #6 |
Wizard
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. |
04-15-2021, 12:10 PM | #7 |
A Hairy Wizard
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
|
|
04-15-2021, 01:41 PM | #8 |
Wizard
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. |
04-15-2021, 11:12 PM | #9 | |
Wizard
Posts: 2,297
Karma: 12126329
Join Date: Jul 2012
Device: Kobo Forma, Nook
|
Quote:
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. |
|
04-16-2021, 09:08 AM | #10 | |
Grand Sorcerer
Posts: 6,465
Karma: 84000001
Join Date: Nov 2011
Location: Tampa Bay, Florida
Device: Kindles
|
Quote:
|
|
04-16-2021, 11:11 AM | #11 |
Wizard
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.
|
04-16-2021, 11:12 AM | #12 |
the rook, bossing Never.
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?
|
04-16-2021, 06:27 PM | #13 |
Grand Sorcerer
Posts: 6,465
Karma: 84000001
Join Date: Nov 2011
Location: Tampa Bay, Florida
Device: Kindles
|
That is what shape-outside is for. It defines what part of the rectangular image can be overwritten by text.
|
04-16-2021, 06:28 PM | #14 |
Grand Sorcerer
Posts: 6,465
Karma: 84000001
Join Date: Nov 2011
Location: Tampa Bay, Florida
Device: Kindles
|
|
04-17-2021, 01:10 AM | #15 | |
Wizard
Posts: 2,297
Karma: 12126329
Join Date: Jul 2012
Device: Kobo Forma, Nook
|
Quote:
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. |
|
Thread Tools | Search this Thread |
|
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 | 2 | 05-31-2009 04:26 AM |