Shaded text box background in epub - broken?

[soundsfromsound]

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!

[mrmikel]

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.

[soundsfromsound]

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]

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!

[PeterT]

The other caveat on shaded boxes is what happens when the user switches to night mode?

[soundsfromsound]

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!

[Jellby]

Originally Posted by soundsfromsound

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:

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)

[Tex2002ans]

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!

Originally Posted by soundsfromsound

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.

Originally Posted by mrmikel

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, ...).

[soundsfromsound]

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?

[Tex2002ans]

Originally Posted by soundsfromsound

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.

Originally Posted by soundsfromsound

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:

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:

<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>

[soundsfromsound]

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.