09-13-2013, 01:14 AM | #1 |
Obsessively Dedicated...
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? |
09-13-2013, 05:26 AM | #2 |
Wizard
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?
|
Advert | |
|
09-13-2013, 05:41 AM | #3 |
Imperfect Perfectionist
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 |
09-13-2013, 06:00 PM | #4 |
Well trained by Cats
Posts: 29,691
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 |
09-14-2013, 03:11 AM | #5 |
frumious Bandersnatch
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. |
Advert | |
|
09-17-2013, 08:13 AM | #6 |
Obsessively Dedicated...
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. |
09-17-2013, 12:59 PM | #7 | |
Wizard
Posts: 1,528
Karma: 6613969
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Quote:
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%; } Code:
<h2><span class="text">23</span></h2> That's all Below you can see a screenshot of my ADE and I attach the respective ePub. Regards Rubén Last edited by RbnJrg; 09-17-2013 at 01:14 PM. |
|
09-18-2013, 03:14 AM | #8 |
Obsessively Dedicated...
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! |
09-18-2013, 05:06 AM | #9 |
frumious Bandersnatch
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.
|
09-18-2013, 09:37 AM | #10 |
Wizard
Posts: 1,528
Karma: 6613969
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
|
09-18-2013, 09:58 PM | #11 |
Obsessively Dedicated...
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. |
Thread Tools | Search this Thread |
|
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 |