06-20-2013, 10:02 AM | #1 |
Wizard
Posts: 1,528
Karma: 6613969
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Dividers and fleurons
What dividers and fleurons used at the end of chapters, or for divisions within a chapter are your favorites? Could you post an image of them? Many thanks in advance.
Rubén |
06-21-2013, 01:05 PM | #2 | |
Zealot
Posts: 100
Karma: 1204
Join Date: Jun 2012
Device: Bookari (née Mantano Reader) on Android; Kindle Fire HD
|
Here are a couple I’ve used:
Quote:
Code:
hr.fancy { border: none; text-align: center; } hr.fancy:after { content: "—»·›–•–‹·«—"; } If you’re embedding the right font, take a further look at the various Unicode symbols blocks. ♦♢♦♢♦
|
|
06-21-2013, 07:13 PM | #3 | |
Wizard
Posts: 1,528
Karma: 6613969
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Quote:
|
|
06-22-2013, 02:56 AM | #4 | |
frumious Bandersnatch
Posts: 7,514
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
Quote:
[*] Actually, it is mentioned, but with the rather cryptic note: "Must not be used within a style sheet whose @media value is other than aural". |
|
06-22-2013, 03:57 AM | #5 |
Grand Sorcerer
Posts: 5,582
Karma: 22735033
Join Date: Dec 2010
Device: Kindle PW2
|
Call me old-fashioned, by I still like the classic Floral Heart (Aldus Leaf) fleuron best.
Since it's defined in the Unicode standard, all you have to do to use it is embed a font with Dingbats support. |
06-22-2013, 06:07 AM | #6 | |
frumious Bandersnatch
Posts: 7,514
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
Quote:
|
|
06-22-2013, 11:14 AM | #7 |
Wizard
Posts: 1,528
Karma: 6613969
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Thank you very much Jellby and Doitsu! So far I was using the Rotated Floral Heart ( ❧ ) but I'm a bit bored of using that character and wanted to see if I could found something else. In the net there are custom free fonts with a lot of fleurons (http://www.fontspace.com/category/fleurons) but honestly seemed very gimmicky and did not like.
Jellby, recién me acabo de dar cuenta de que eres un español que estás viviendo en Suecia Es bueno saber que aquí no solo hay alguien que habla el castellano sino que también es un destacadísimo miembro de este foro. Un cordial saludo desde Argentina! Rubén Last edited by RbnJrg; 06-24-2013 at 08:50 AM. |
06-24-2013, 05:52 AM | #8 |
Obsessively Dedicated...
Posts: 3,200
Karma: 34977556
Join Date: May 2011
Location: JAPAN (US expatriate)
Device: Sony PRS-T2, ADE on PC
|
if you would like to take a look at some more fonts, here are some I've tried which are redistributable, and subsetting makes them really tiny if you only use a few glyphs.
foglihten decorative fonts from Gluk http://www.glukfonts.pl/font.php?font=Foglihten im fell flowers http://www.fontsquirrel.com/fonts/IM-FELL-FLOWERS-1 http://www.fontsquirrel.com/fonts/IM-FELL-FLOWERS-2 Kingthings flourishes http://www.fontsquirrel.com/fonts/Kingthings-Flourishes |
06-24-2013, 06:09 AM | #9 |
frumious Bandersnatch
Posts: 7,514
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
Beware of using that kind of font, though. It is not recommended to use font with a non-standard character map, i.e. an "A" should always look like an "A", and not some ornament or dingbat. For that, a font should use the appropriate Unicode point or the private plane.
|
06-24-2013, 08:58 AM | #10 | |
Wizard
Posts: 1,528
Karma: 6613969
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Quote:
|
|
06-24-2013, 11:17 AM | #11 |
Fanatic
Posts: 580
Karma: 810184
Join Date: Sep 2010
Location: Norway
Device: prs-t1, tablet, Nook Simple, assorted kindles, iPad
|
I've ended up converting the flourishes I want to SVG and displaying them as images.
I've had trouble getting some dingbats to display at all, and also I like the flourish to be a fixed size relative to the screen width. I know how to do that with images, but not with text. Finally, I can set the <IMG> alt-attribute to something like -->-*-<--, so there's an OK fallback, instead of spurious letters popping up. |
06-24-2013, 10:18 PM | #12 | |
Obsessively Dedicated...
Posts: 3,200
Karma: 34977556
Join Date: May 2011
Location: JAPAN (US expatriate)
Device: Sony PRS-T2, ADE on PC
|
Quote:
Another alternative which I am exploring is a freeware font editor called TypeLight from http://www.cr8software.net/typelight.html. The feature list is pretty impressive: you can use it to create fonts or edit existing fonts, convert between ttf and otf, and more. (They also offer a trial of the Pro version, which is not time-limited, and supposedly only feature-limited in that it will only save the first 50 characters of the font.) I have barely begun to use TypeLight, but I am going to try to create some small fonts with decorative glyphs and see how it works out. |
|
06-28-2013, 03:53 PM | #13 |
Zealot
Posts: 100
Karma: 1204
Join Date: Jun 2012
Device: Bookari (née Mantano Reader) on Android; Kindle Fire HD
|
I’m trying to adapt my suggestion above to SVG images—which it should be possible to make hr tags appear with, right?
Code:
<?xml version="1.0" encoding="utf-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="60" height="10" xmlns="http://www.w3.org/2000/svg"> <text stroke-width="0" x="30" y="7.3" font-size="10" text-anchor="middle">—»·›–•–‹·«—</text> </svg> Code:
hr { background-image:url("../Images/hr.svg"); } |
06-29-2013, 07:53 AM | #14 |
Fanatic
Posts: 580
Karma: 810184
Join Date: Sep 2010
Location: Norway
Device: prs-t1, tablet, Nook Simple, assorted kindles, iPad
|
Background images not supported in epub2 specs, I'm afraid
|
06-29-2013, 10:22 AM | #15 | |
Wizard
Posts: 1,528
Karma: 6613969
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Quote:
In you .css stylesheet, write: Code:
.svg_fleuron { background-image: url("../Images/hr.svg"); background-position: 50% 0%; background-repeat: no-repeat; } In your .xhtml file write: Code:
<p class="svg_fleuron"> </p> Regards Rubén |
|
Thread Tools | Search this Thread |
|