Dividers and fleurons

[RbnJrg]

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

[jcsalomon]

Here are a couple I’ve used:

—∗—
—›–•–‹—
—»·›–•–‹·«—

Aside from the Asterisk Operator, these are all Unicode symbols from the General Punctuation block—em- and en-dashes, bullets, middle-dots, and angle quotation marks—and should be present in any text font. Unfortunatly this code

hr.fancy { border: none; text-align: center; }
hr.fancy:after { content: "—»·›–•–‹·«—"; }

is not nearly as well-supported in EPUB readers as is using images.

If you’re embedding the right font, take a further look at the various Unicode symbols blocks.

♦♢♦♢♦

[RbnJrg]

Originally Posted by jcsalomon

Here are a couple I’ve used:Aside from the Asterisk Operator, these are all Unicode symbols from the General Punctuation block—em- and en-dashes, bullets, middle-dots, and angle quotation marks—and should be present in any text font. Unfortunatly this code

hr.fancy { border: none; text-align: center; }
hr.fancy:after { content: "—»·›–•–‹·«—"; }

is not nearly as well-supported in EPUB readers as is using images.

If you’re embedding the right font, take a further look at the various Unicode symbols blocks.

♦♢♦♢♦

Many thanks jcsalomon!

[Jellby]

Originally Posted by jcsalomon

Unfortunatly this code

hr.fancy { border: none; text-align: center; }
hr.fancy:after { content: "—»·›–•–‹·«—"; }

is not nearly as well-supported in EPUB readers as is using images.

Mainly because the "content" property is not included in the ePub spec[*], so one should not rely on it.

[*] 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".

[Doitsu]

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.

[Jellby]

Originally Posted by Doitsu

Since it's defined in the Unicode standard, all you have to do to use it is embed a font with Dingbats support.

Or use the SVG file in an ePub http://www.fileformat.info/info/unic...oral_heart.svg

[RbnJrg]

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

[GrannyGrump]

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

[Jellby]

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.

[RbnJrg]

Originally Posted by grannyGrumpy

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

Many thanks for the links granny!

[SBT]

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.

[GrannyGrump]

Originally Posted by Jellby

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.

True, but for scene/chapter breaks and such, if you choose carefully, you can use a decorative font's alternative glyph for asterisk, dash, emdash, etc. Those would degrade gracefully if the embedded font is not honored/used.

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.

[jcsalomon]

I’m trying to adapt my suggestion above to SVG images—which it should be possible to make hr tags appear with, right?

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

Can’t figure out the CSS to make this work, though. This isn’t working:

hr { background-image:url("../Images/hr.svg"); }

[SBT]

Background images not supported in epub2 specs, I'm afraid

[RbnJrg]

Originally Posted by jcsalomon

I’m trying to adapt my suggestion above to SVG images—which it should be possible to make hr tags appear with, right?

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

Can’t figure out the CSS to make this work, though. This isn’t working:

hr { background-image:url("../Images/hr.svg"); }

With the tag <hr> doesn't work. Try the following:

In you .css stylesheet, write:

.svg_fleuron {
   background-image: url("../Images/hr.svg"); 
   background-position: 50% 0%;
   background-repeat: no-repeat;
}

Write it as I did it; don't use the background shorthand property.

In your .xhtml file write:

<p class="svg_fleuron">&nbsp;</p>

It should work.

Regards
Rubén