Alphabet for DropCaps

[crutledge]

I'm looking for a simple graphics alphabet (to include punctuation ???) to use as DropCaps.

Can anyone point me at a set?

It would be very nice if it were free.

Charlie

[RbnJrg]

Originally Posted by crutledge

I'm looking for a simple graphics alphabet (to include punctuation ???) to use as DropCaps.

Can anyone point me at a set?

It would be very nice if it were free.

Charlie

In this page:

http://www.picgifs.com/alphabets/

you could find many graphic motives.

[theducks]

Originally Posted by crutledge

I'm looking for a simple graphics alphabet (to include punctuation ???) to use as DropCaps.

Can anyone point me at a set?

It would be very nice if it were free.

Charlie

http://www.google.com/fonts/

You can download (If they were for [/I]web pages, you could link them) most of these for free and embed them.

I have used quite a few for my own use

[RbnJrg]

Originally Posted by theducks

http://www.google.com/fonts/

You can download (If they were for [/I]web pages, you could link them) most of these for free and embed them.

I have used quite a few for my own use

It seems to me that Charlie is not looking for Drop Caps fonts but images.

[Hitch]

Originally Posted by RbnJrg

It seems to me that Charlie is not looking for Drop Caps fonts but images.

I know that this is obvious, and thus doesn't need saying, (which means, of course, WHY is she saying it?), but...using images, as coolio as that is visually, bloody screws with search. Just sayin'.

Charlie, can you give us an idea as to "flavor?" Western, kids' blocks, calligraphic...anything?

Hitch

[Toxaris]

Perhaps here are some nice ones for you:
http://moorstation.org/typoasis/desi...wels/index.htm

[crutledge]

Originally Posted by RbnJrg

It seems to me that Charlie is not looking for Drop Caps fonts but images.

RbnJrg is correct. I was not very clear.

I looking for A.jpg, B.jpg, etc. Not really fancy but simple, plain.

[mrmikel]

Can you get around search problems with the image alt text for the whole word? Do the machines use it in their search?

[RbnJrg]

Originally Posted by crutledge

RbnJrg is correct. I was not very clear.

I looking for A.jpg, B.jpg, etc. Not really fancy but simple, plain.

In that case, the simpler way is to convert font glyphs into svg images. With Inkscape you can do that in 30 minutes (the whole alphabet plus punctuation signs). And svg images are better than jpg ones (for this purpose).

[Doitsu]

Originally Posted by RbnJrg

In that case, the simpler way is to convert font glyphs into svg images. With Inkscape you can do that in 30 minutes (the whole alphabet plus punctuation signs).

If it doesn't have to be .svg images, you can also use BabelMap, which will automatically export all glyphs of a font as .bmp, .jpg, .png. or .gif files in a couple of seconds, if you only export Basic Latin uppercase glyphs (0041-005A).

Fonts > Export Font Glyphs > Code Points: 0041 to 005A

[RbnJrg]

If you can live with .jpg, .gif, .png, etc. images, then the advice of Doitsu is perfect. But if you want to use svg images, then you don't need to use Inkscape as I said before; things are still easier You only need to write svg images in Sigil (all images will be the same, only will change in the letter you will use there). I give you an example:

SVG for letter A:

<svg 
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   version="1.1"
   width="100"
   height="100">
  <text x="50" y="100" text-anchor="middle" fill="black" style="font-size: 100px; font-weight: bold">A</text>
</svg>

Using the svg in the ebook:

<p><img class="DropImage" alt="Image1" src="../Images/Image1.svg" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac tellus nunc....</p>

And the stylesheet is:

p {
    text-align: justify;
}

.DropImage {
    float: left;
    margin: -12px 5px 0 0;
}

Here is like is looks in Sigil:



Here is as looks in ADE:



Below you can see the respective ePub. Of course, you can change the size, the color, etc. for each drop cap (you can use all the posibilities of the svg text).

Regards
Rubén

[JSWolf]

Originally Posted by crutledge

RbnJrg is correct. I was not very clear.

I looking for A.jpg, B.jpg, etc. Not really fancy but simple, plain.

There are problems with using graphics instead of an actual font. You screw with searching and the graphic doesn't size when you change the font size. Better off finding a font with caps that are sort of what you want.

Portculliard Initials is such a font. Give it a look.
http://moorstation.org/typoasis/desi...wels/index.htm

Also have a look over here.
http://fontgarden.com/c/3/initial_caps_free_fonts

[crutledge]

Originally Posted by Doitsu

If it doesn't have to be .svg images, you can also use BabelMap, which will automatically export all glyphs of a font as .bmp, .jpg, .png. or .gif files in a couple of seconds, if you only export Basic Latin uppercase glyphs (0041-005A).

Fonts > Export Font Glyphs > Code Points: 0041 to 005A

@Doitsu,
A very nice tool. I'm still experimenting with but it seems to work fine despite my lack of knowledge.

Now for the really dumb question!!

Is there a tutorial for using these gylphs as the first character in a paragraph?

[DaleDe]

Originally Posted by crutledge

@Doitsu,
A very nice tool. I'm still experimenting with but it seems to work fine despite my lack of knowledge.

Now for the really dumb question!!

Is there a tutorial for using these gylphs as the first character in a paragraph?

the same method as it shown earlier for the SVG example will work for bitmaps as well. Just call the image with a css set to left and let the text wrap around it. It is also possible to just increase the font size and let it drop if you don't want fancy characters, no image required.

Dale

[Doitsu]

Originally Posted by crutledge

Is there a tutorial for using these gylphs as the first character in a paragraph?

There are many websites with CSS dropcaps tutorials, for example, this one. However, this method is rather labor intensive, since you'll most likely have to adjust the values for each letter image.

Most ePub designers simply embed special dropcap fonts and apply them to the first letter of a chapter via CSS. If you search the epub forum you'll find many ready-made CSS examples that you can copy and paste.

One good example, is Jerome, Jerome K.: Three Men in a Boat, which uses both images and embedded fonts as dropcaps.