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

Go Back   MobileRead Forums > E-Book Formats > ePub

Notices

Reply
 
Thread Tools Search this Thread
Old 12-20-2013, 07:31 PM   #1
soundsfromsound
Enthusiast
soundsfromsound began at the beginning.
 
Posts: 31
Karma: 10
Join Date: Aug 2013
Device: none
Shaded text box background in epub - broken?

Hello.

I wasn't sure where to place this post, so I apologize if this is the wrong subforum. I am trying to create an epub from an ODT file for this essay I wrote. I have it looking perfect in LibreOffice however no matter what settings I try, the epub always "breaks up" the nice quote box. Let me show you.

(Please see attached images)

Is there any way to keep the gray shaded background consistent and looking like it did in LibreOffice, but as an epub? I've tried Jutoh and Sigil, both render a broken box. I am comfortable with editing CSS and HTML, so if you know of a workaround fix, please let me know! Much appreciated!
Attached Thumbnails
Click image for larger version

Name:	libreoffice odt shading (correct).png
Views:	344
Size:	13.7 KB
ID:	116961   Click image for larger version

Name:	shaded epub.png
Views:	342
Size:	10.4 KB
ID:	116962  
soundsfromsound is offline   Reply With Quote
Old 12-20-2013, 07:39 PM   #2
mrmikel
Color me gone
mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.
 
Posts: 2,089
Karma: 1445295
Join Date: Apr 2008
Location: Central Oregon Coast
Device: PRS-300
It is not such a great thing for us e-ink readers to give us black text on one of the 16 shades of gray, even if you get it to work.

If there are not many of them, you can do this as an image which will allow you to control layout.
mrmikel is offline   Reply With Quote
Advert
Old 12-20-2013, 08:53 PM   #3
soundsfromsound
Enthusiast
soundsfromsound began at the beginning.
 
Posts: 31
Karma: 10
Join Date: Aug 2013
Device: none
Thanks for the feedback. It would only be in two places, but I'll consider other options down the road. What do you mean use this as an image? I figured it'd be done with CSS and keep things nice and clean. How would I do this with an image?
soundsfromsound is offline   Reply With Quote
Old 12-20-2013, 10:10 PM   #4
soundsfromsound
Enthusiast
soundsfromsound began at the beginning.
 
Posts: 31
Karma: 10
Join Date: Aug 2013
Device: none
I guess I fixed it. I just have to not hit enter when spacing down for the author's name for the quote. If I hold Shift+enter, it spaces down the same way, but does not "break" for a new paragraph. Not sure how/why, but this seems to preserve my shading box just fine. Hopefully this will help anyone else who needs this info. Thanks!
soundsfromsound is offline   Reply With Quote
Old 12-20-2013, 10:20 PM   #5
PeterT
Grand Sorcerer
PeterT ought to be getting tired of karma fortunes by now.PeterT ought to be getting tired of karma fortunes by now.PeterT ought to be getting tired of karma fortunes by now.PeterT ought to be getting tired of karma fortunes by now.PeterT ought to be getting tired of karma fortunes by now.PeterT ought to be getting tired of karma fortunes by now.PeterT ought to be getting tired of karma fortunes by now.PeterT ought to be getting tired of karma fortunes by now.PeterT ought to be getting tired of karma fortunes by now.PeterT ought to be getting tired of karma fortunes by now.PeterT ought to be getting tired of karma fortunes by now.
 
PeterT's Avatar
 
Posts: 12,124
Karma: 73448616
Join Date: Nov 2007
Location: Toronto
Device: Nexus 7, Clara, Touch, Tolino EPOS
The other caveat on shaded boxes is what happens when the user switches to night mode?
PeterT is offline   Reply With Quote
Advert
Old 12-20-2013, 10:31 PM   #6
soundsfromsound
Enthusiast
soundsfromsound began at the beginning.
 
Posts: 31
Karma: 10
Join Date: Aug 2013
Device: none
I'm new to exploring the world of epub publishing, I only have used PDF for years. I'll try my best not to mess it up for anyone! But, for now I'm just happy I figured out line breaks vs. paragraphs lol I hard a major brain fart. Sorry!

I see tons of epubs out there, from pro publishing companies, and their epubs have tons of text boxes, colors, shading, images, etc. - looks great on my phone or tablet, or computer. I'm trying to achieve that, baby steps!
soundsfromsound is offline   Reply With Quote
Old 12-21-2013, 03:59 AM   #7
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 7,514
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
Quote:
Originally Posted by soundsfromsound View Post
I am comfortable with editing CSS and HTML, so if you know of a workaround fix, please let me know!
Show us the current CSS+HTML.

I'd have something like:

Code:
div.shaded {
  background-color: #AAA;
}

<div class="shaded">
<p>A smart quote.</p>
<p class="source">The Author</p>
</div>
(apart from other margin/alignment settings for the different pieces)
Jellby is offline   Reply With Quote
Old 12-23-2013, 04:00 PM   #8
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
Here is the code for a gray box that I use, I think it looks fantastic on my Nook (e-ink) + color (PC or Tablet). I can take a sample picture of how it looks on my Nook if you want:

https://www.mobileread.com/forums/sho...25&postcount=9

Side Note: Thank you for the PNG attachments! It is a breath of fresh air compared to people attaching pixelated JPGs which hurt my eyes!

Quote:
Originally Posted by soundsfromsound View Post
I see tons of epubs out there, from pro publishing companies, and their epubs have tons of text boxes, colors, shading, images, etc. - looks great on my phone or tablet, or computer. I'm trying to achieve that, baby steps!
Well show us some samples of these, and give us the code! I would love to learn how other publishers do it... there might be a gem in there, or pieces of code that others can use elsewhere.

That is how I learned that box code above, I took that box code right out of a book that I purchased/read, and then I added the gray background and tweaked that on my own.

I believe that many of the fancier design decisions these publishers make would just break on smaller devices, e-ink, night mode, etc. etc. I have seen HORRIBLE code coming out of many of these sold EPUBs (for example, forcing black font). BUT, you might be able to use their code as a good jumping off point.

Quote:
Originally Posted by mrmikel View Post
If there are not many of them, you can do this as an image which will allow you to control layout.
Images are not searchable, and do not follow user preferences (font, font-size, margins, line-height, ...). While it may look OK (on SOME devices), it would be hideous for the long-run of the book (biggest problem I can see is that it will not scale well). Images for text should only really be used in extremely rare cases (math, complex tables, ...).

Last edited by Tex2002ans; 12-23-2013 at 04:13 PM.
Tex2002ans is offline   Reply With Quote
Old 12-24-2013, 11:38 AM   #9
soundsfromsound
Enthusiast
soundsfromsound began at the beginning.
 
Posts: 31
Karma: 10
Join Date: Aug 2013
Device: none
Thank for you those tips, very very helpful for my projects!!

If I share contents/code within an epub files, not the book text itself, is that not violating copyright laws somehow?

Tex, that image you shared is exactly what I want. What's the trick?
soundsfromsound is offline   Reply With Quote
Old 12-24-2013, 04:29 PM   #10
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 soundsfromsound View Post
If I share contents/code within an epub files, not the book text itself, is that not violating copyright laws somehow?
How would we all learn if we were not able to copy/emulate from others? It is just CSS. There is no problem with looking at the code and seeing how it works, and then ripping it right out of a book if you enjoy the look of it and want to use elsewhere!

Also, a lot of these larger publishers tend to put a HUGE "in-house" stylesheet to cover everything under the sun (and don't use 99% of it). I tend to look through those and see if I can spot any gems that I can use elsewhere.

Quote:
Originally Posted by soundsfromsound View Post
Tex, that image you shared is exactly what I want. What's the trick?
Trick? No trick!

Here is an earlier topic where someone wanted a "blog post" in their book. I attached a sample EPUB in Post #5, and images of its usage right out of the original book in post #10:

https://www.mobileread.com/forums/sho...d.php?t=218023

Here is also another book that I touched up for an author on MobileRead who was having odd formatting problems from B&N (with images + sample):

https://www.mobileread.com/forums/sho...0&postcount=54

As you can see, I just used that initial code as a base, and built up from there.

So in your case, you probably just want to use something like this in your CSS:

Code:
div.textbox {
	background-color:#D1D3D4;
	border-bottom: 3px double;
	border-top: 3px double;
	border-left: 3px double;
	border-right: 3px double;
	padding: 1em;
}
and in your book, you want this:

Code:
<p>Stuff outside the box:</p>

<div class="textbox">
<p>Everything in the box here.</p>
<p>More stuff in the box.</p>
</div>

<p>Stuff after the box.</p>

Last edited by Tex2002ans; 12-24-2013 at 04:41 PM.
Tex2002ans is offline   Reply With Quote
Old 12-27-2013, 12:53 AM   #11
soundsfromsound
Enthusiast
soundsfromsound began at the beginning.
 
Posts: 31
Karma: 10
Join Date: Aug 2013
Device: none
Thank you so much for sharing that code with me. Now that I hear it, it makes perfect sense. Sorry for being so slow with this.
soundsfromsound 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
Background image with text on top? Psymon ePub 144 05-26-2020 05:48 PM
Text and background colours dawood Conversion 2 10-18-2013 04:43 PM
White vs. black background for text levander Amazon Kindle 21 01-15-2013 02:46 PM
White Text on Black Background robogeek Which one should I buy? 6 07-20-2010 07:37 PM
Any epub reader for PC allows me to change text and background color? ttluisa General Discussions 5 05-11-2010 11:04 PM


All times are GMT -4. The time now is 06:27 AM.


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