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 09-13-2013, 01:14 AM   #1
GrannyGrump
Obsessively Dedicated...
GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.
 
GrannyGrump's Avatar
 
Posts: 3,200
Karma: 34977556
Join Date: May 2011
Location: JAPAN (US expatriate)
Device: Sony PRS-T2, ADE on PC
Custom Chapterhead style --- possible in CSS?

The attached file is a graphics mock-up of what I want to accomplish. I want the characters to "bleed" off the edges of the rectangular background.

In the CSS, I have set the background color to black, and the font to white, and played around with floats, padding (negative padding), etc, but without success.

Is this even possible with CSS? Or must I work out a solution using a graphic image for the background?

Does anyone have suggestions?
Attached Thumbnails
Click image for larger version

Name:	chapterhead.jpg
Views:	280
Size:	5.4 KB
ID:	110932  
GrannyGrump is offline   Reply With Quote
Old 09-13-2013, 05:26 AM   #2
Toxaris
Wizard
Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.
 
Toxaris's Avatar
 
Posts: 4,520
Karma: 121692313
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-T1, Kobo Touch, Kobo Aura
You should be able to do this via SVG, for CSS I have to think. It sounds doable... Perhaps via a table?
Toxaris is offline   Reply With Quote
Advert
Old 09-13-2013, 05:41 AM   #3
elibrarian
Imperfect Perfectionist
elibrarian ought to be getting tired of karma fortunes by now.elibrarian ought to be getting tired of karma fortunes by now.elibrarian ought to be getting tired of karma fortunes by now.elibrarian ought to be getting tired of karma fortunes by now.elibrarian ought to be getting tired of karma fortunes by now.elibrarian ought to be getting tired of karma fortunes by now.elibrarian ought to be getting tired of karma fortunes by now.elibrarian ought to be getting tired of karma fortunes by now.elibrarian ought to be getting tired of karma fortunes by now.elibrarian ought to be getting tired of karma fortunes by now.elibrarian ought to be getting tired of karma fortunes by now.
 
elibrarian's Avatar
 
Posts: 451
Karma: 672038
Join Date: Dec 2011
Location: Ølstykke, Denmark
Device: none
This seems to work:

font-family: sans-serif;
text-align: center;
color: white;
width: 30%;
margin-left: 35%;
background: black center;
font-size:2em;
line-height: 0.7em;
height: 0.5em;

It seems to be the last three lines, that does the magic. It looks crappy in Sigil (cuts of the bottom of the characters), but ok in ADE:

Regards,

Kim
Attached Thumbnails
Click image for larger version

Name:	blacktitle.jpg
Views:	345
Size:	59.2 KB
ID:	110937  
elibrarian is offline   Reply With Quote
Old 09-13-2013, 06:00 PM   #4
theducks
Well trained by Cats
theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.
 
theducks's Avatar
 
Posts: 29,689
Karma: 54369090
Join Date: Aug 2009
Location: The Central Coast of California
Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A
To what e-librarian did
just add
padding: 5pt ; <sweeten to taste this insures background all around
theducks is online now   Reply With Quote
Old 09-14-2013, 03:11 AM   #5
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
Whatever you do, it will only work with black text on white background (or any color on white background, at most). Switch to "night mode" and you'll only see the big white numbers and no black box.

I did a quick search to see whether there is some way of inverting text and background colors with CSS3, but didn't find any.
Jellby is offline   Reply With Quote
Advert
Old 09-17-2013, 08:13 AM   #6
GrannyGrump
Obsessively Dedicated...
GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.
 
GrannyGrump's Avatar
 
Posts: 3,200
Karma: 34977556
Join Date: May 2011
Location: JAPAN (US expatriate)
Device: Sony PRS-T2, ADE on PC
Whee! I'm back after 3 days off-line, and got some nice answers.

@elibrarian, I am trying your code, and it works. and @theducks, thanks for the tweak (though in this case I don't want background on the top and bottom edges, I will use it another time for a different effect.)

Jellby, I hadn't thought about night mode. And maybe simple big white numbers would not be a bad fallback. But I am going to experiment with adding some white borders to a surrounding div (or borders to match the font color), so if the black bar disappears, the border could contain the numbers.

Thank you guys, for responding!

Last edited by GrannyGrump; 09-17-2013 at 08:15 AM.
GrannyGrump is offline   Reply With Quote
Old 09-17-2013, 12:59 PM   #7
RbnJrg
Wizard
RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.
 
Posts: 1,528
Karma: 6613969
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Quote:
Originally Posted by grannyGrumpy View Post
The attached file is a graphics mock-up of what I want to accomplish. I want the characters to "bleed" off the edges of the rectangular background.

In the CSS, I have set the background color to black, and the font to white, and played around with floats, padding (negative padding), etc, but without success.

Is this even possible with CSS? Or must I work out a solution using a graphic image for the background?

Does anyone have suggestions?
Well, after a bit of work, I could find something that ALSO works in ADE . In your .css stylesheet, write:

Code:
h2 {
  height: 60px;
  margin-bottom: 40px;
  background: black;
}
                           
.text {
  float: left;
  width: 15%; /* this in linked with the left margin below */
  line-height: 100%;
  font-family: sans-serif;
  font-size: 94px;
  text-align: center;
  color: white;
  margin: -10px 0 -10px 42.5%;
}
And in your .html file write:

Code:
<h2><span class="text">23</span></h2>
The text is "floated-centered". I do that by asigning a width to the text block (in this case is 15% but feel free of changing it) and setting a left margin according to that width (in this case, since the width is 15% then the margin-left is [100%-15%]/2 = 42.5%). Also you can play with the font-size and the height of the header (h2).

That's all

Below you can see a screenshot of my ADE and I attach the respective ePub.

Regards
Rubén
Attached Thumbnails
Click image for larger version

Name:	ChapterHeading.jpg
Views:	275
Size:	74.6 KB
ID:	111243  
Attached Files
File Type: epub ChapterHeading.epub (2.7 KB, 228 views)

Last edited by RbnJrg; 09-17-2013 at 01:14 PM.
RbnJrg is offline   Reply With Quote
Old 09-18-2013, 03:14 AM   #8
GrannyGrump
Obsessively Dedicated...
GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.
 
GrannyGrump's Avatar
 
Posts: 3,200
Karma: 34977556
Join Date: May 2011
Location: JAPAN (US expatriate)
Device: Sony PRS-T2, ADE on PC
Reuben, I've played with your code, using ems instead of px, and it came out quite nicely in ADE. I'm not sure if the height and line height would work on other readers. (probably not, all my ideas lately seem to be too fragile to go hiking around outside of ADE!) It does not look well in Calibre Reader, so probably not good under QT.

Code:
h2 {
  height: 1em;
  margin-bottom: .5em;
  background: black;
}
                           
.text {
  float:left;
  width: 50%;
  line-height: 112%;
  font-family: sans-serif;
  font-size: 2em;
  text-align: center;
  color: white;
  margin: -.25em 0 -.25em 25%;
}

Thank you so much!
GrannyGrump is offline   Reply With Quote
Old 09-18-2013, 05:06 AM   #9
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
Note, too, that different fonts have different relative size of characters in the "em-box", so that 1em may match the height of numbers in one font, but not in another. That will be especially noticeable with "old-style" digits, try Georgia for instance.
Jellby is offline   Reply With Quote
Old 09-18-2013, 09:37 AM   #10
RbnJrg
Wizard
RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.
 
Posts: 1,528
Karma: 6613969
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Quote:
Originally Posted by grannyGrumpy View Post
Reuben, I've played with your code, using ems instead of px, and it came out quite nicely in ADE.
Well done!!

Quote:
Originally Posted by grannyGrumpy View Post
Thank you so much!
You are welcome
RbnJrg is offline   Reply With Quote
Old 09-18-2013, 09:58 PM   #11
GrannyGrump
Obsessively Dedicated...
GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.
 
GrannyGrump's Avatar
 
Posts: 3,200
Karma: 34977556
Join Date: May 2011
Location: JAPAN (US expatriate)
Device: Sony PRS-T2, ADE on PC
@RbnJrg:

@Jellby: you are right. If I do use this, I would probably embed a subsetted font.



Anyway, this was a productive thread. I learned two new css tricks, and that is always a plus.
GrannyGrump 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
Feature Request - custom CSS style gentoosiast EPUBReader 1 12-14-2012 03:26 AM
An example file of your CSS style sheet roger64 Writer2ePub 6 04-11-2012 02:59 AM
CSS style, TOC and other stuff sebdea Sigil 8 04-19-2011 03:40 AM
list-style in CSS? frabjous ePub 2 08-13-2009 06:28 PM


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


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