Background colour in place of text boxes

[MacEachaidh]

I understand in principle how to use text boxes and background colours. I don't want to use text boxes in an epub, since I want the text still to be able to flow, but I'd like to emulate the look to some degree.

So: is there any way to have the background colour stretch margin to margin, even though the text in front of it is indented by, say, 1 em on both sides?
Also, to have the colour start maybe a line before the para text, without having to use clunky approaches like empty paragraphs?

I assume this would require making the colour a separate element from the paragraph, rather than a property of the para itself, but I don't know who to do that.

Thanks for any help.

[RbnJrg]

Originally Posted by MacEachaidh

I understand in principle how to use text boxes and background colours. I don't want to use text boxes in an epub, since I want the text still to be able to flow, but I'd like to emulate the look to some degree.

So: is there any way to have the background colour stretch margin to margin, even though the text in front of it is indented by, say, 1 em on both sides?
Also, to have the colour start maybe a line before the para text, without having to use clunky approaches like empty paragraphs?

I assume this would require making the colour a separate element from the paragraph, rather than a property of the para itself, but I don't know who to do that.

Thanks for any help.

Something like this?



You can get that effect by giving the property "background: yellow" (or the color you want) to the body tag. Write the following in your css stylesheet:

body {
   background: yellow;
   margin: 0 25px;
}

Below you can check the respective epub so you can understand better the code I used.

Regards
Rubén

[MacEachaidh]

Thanks for the reply.

Something like that, yes, but applied to specific paragraphs -- like text boxes in print media -- rather than the whole document.

[BetterRed]

Originally Posted by MacEachaidh

Thanks for the reply.

Something like that, yes, but applied to specific paragraphs -- like text boxes in print media -- rather than the whole document.

In the stylesheet create a p_yellow class that is same as existing p class, move the background:yellow out of body into the p_yellow class, and then use p_yellow to style the relevant paragraphs.

Suggested reading. Pablo's tutorial ==>> https://wiki.mobileread.com/wiki/EPub_Tutorial

[GeoffR]

Add padding to make the background colour extend beyond the original object itself. e.g. the following displays the enclosed paragraphs in a blue box that extends 1em beyond the paragraphs and has an extra 0.5em of transparent margin top and bottom:

<div style="background-color:blue; padding:1em; margin:0.5em 0;">
  <p> ... </p>
  <p> ... </p>
</div>

The box doesn't interfere with the flow of the text, it will break between pages as normal.

[Notjohn]

That's nice stuff, thanks all! I can see the possibilities in using a gray background for something that in a print edition would be in a box.

[Freeshadow]

Originally Posted by Notjohn

That's nice stuff, thanks all! I can see the possibilities in using a gray background for something that in a print edition would be in a box.

Amen to that

[HarryT]

You could also do it using a table.

[MacEachaidh]

Thanks all for your help with this.

GeoffR, what you suggested produced precisely the result I was looking for, so that's what I did. The missing piece for me was padding, which hadn't occurred to me. (Duh.)

Though in other circumstances I can see tables could be a great way to go as well.

[JSWolf]

The problem with a background color is that on eInk it might be hard to read the text.

[MacEachaidh]

Yes, I've noticed that, but bolding the text and keeping the background very pale to increase the contrast seems to achieve the desired effect, if I choose a fairly open typeface.

[Tex2002ans]

Originally Posted by JSWolf

The problem with a background color is that on eInk it might be hard to read the text.

Definitely something to always keep in mind.

Back in 2013 I posted the code that I used for a textbox with a gray background:

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

Looks great on color devices + it seemed to work really well on e-ink (Nook) as well.

Originally Posted by MacEachaidh

Yes, I've noticed that, but bolding the text and keeping the background very pale to increase the contrast seems to achieve the desired effect, if I choose a fairly open typeface.

You may also want to look at this other example CSS for a "blog post" I pulled out of a Tor book:

https://www.mobileread.com/forums/sho...63#post2571663

This type of stuff can easily be tweaked and learned from...