Drop cap

Greetings,

Does anybody know an easy way to create CSS drop caps in Freeway? I have toyed with various tutorials as in this example, but I can’t get it to work correctly:

http://www.safalra.com/web-design/typography/css-drop-caps/

Regards,
larsboye


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi larsboye,

I have a FW Pro example file which you can pick apart if you like.
Let me know and I’ll post a link to the file.

Todd

On Mar 24, 2008, at 5:52 AM, larsboye wrote:

Does anybody know an easy way to create CSS drop caps in Freeway? I
have toyed with various tutorials as in this example, but I can’t
get it to work correctly:

http://www.safalra.com/web-design/typography/css-drop-caps/


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Todd,

could you send me this link also?

Regards, Remco

Op 24-mrt-2008, om 14:58 heeft Todd het volgende geschreven:

Hi larsboye,

I have a FW Pro example file which you can pick apart if you like.
Let me know and I’ll post a link to the file.

Todd

On Mar 24, 2008, at 5:52 AM, larsboye wrote:

Does anybody know an easy way to create CSS drop caps in Freeway? I
have toyed with various tutorials as in this example, but I can’t
get it to work correctly:

http://www.safalra.com/web-design/typography/css-drop-caps/


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Todd,

Yes, I would be most interested in having a closer look at your file. Thanks in advance…

Happy Easter,
larsboye


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Remco and larsboye,

Here you go. <http://anoptic.com/demo/drop_caps/index.html>

Todd

On Mar 24, 2008, at 9:03 AM, larsboye wrote:

Yes, I would be most interested in having a closer look at your file. Thanks in advance…

Thanks a lot! I’ll keep you posted…

All best,

larsboye


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi again,

I am wondering whether it’s possible to align the top of the drop cap with the first line?

larsboye


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Oops. I guess it doesn’t look like the tutorial. Sorry, my mistake. Yes, it can. I’ll go back and look for what I missed or removed and let you know. I’m sure it’s simple.

Todd

On Mar 24, 2008, at 9:46 AM, larsboye wrote:

I am wondering whether it’s possible to align the top of the drop cap with the first line?

Thanks, Todd

larsboye

On 24 Mar. 2008, 3:02 pm, Todd wrote:

Oops. I guess it doesn’t look like the tutorial. Sorry, my mistake.
Yes, it can. I’ll go back and look for what I missed or removed and
let you know. I’m sure it’s simple.

Todd


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I see what happened. There should be a closing span tag after the D. I need to look at the CSS again but just to see what I’m talking about if you insert a markup item immediately after the D and add then preview you’ll see that letter aligns properly. I’ll fix this in the CSS.

Todd

On Mar 24, 2008, at 9:46 AM, larsboye wrote:

I am wondering whether it’s possible to align the top of the drop cap with the first line?

I had incorrectly applied a style. It’s all good. Here’s the updated FW file.

<http://anoptic.com/demo/drop_caps/DropCap.zip>

Todd

On Mar 24, 2008, at 10:06 AM, larsboye wrote:

Thanks, Todd

On 24 Mar. 2008, 3:02 pm, Todd wrote:

Oops. I guess it doesn’t look like the tutorial. Sorry, my mistake.
Yes, it can. I’ll go back and look for what I missed or removed and
let you know. I’m sure it’s simple.

Excellent! Everything works as expected now.
Thank you once again for this piece of CSS wizardry, Todd. It is exactly what I have been looking for!

Best regards,
larsboye


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

You’re welcome. ; )

Todd

On Mar 24, 2008, at 10:28 AM, larsboye wrote:

Excellent! Everything works as expected now.

Thank you once again for this piece of CSS wizardry, Todd. It is exactly what I have been looking for!

Hi Todd,

I converted your em-units to px to with the unfortunate result that the layout breaks apart. Apparently it is important to use ems to define the styles…
I have not fully understood the virtues of elastic layout so maybe you or another typographic guru on this forum could help me and other novices with some hints?

Best regards,

larsboye


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

ems are relative length units which means their size is computed with respect to the parent element as opposed to a pixel which is an absolute length unit. For this trick to work best em units are the logical choice because they can be controlled both horizontally and vertically which pixels cannot. I did a quick test I changed all em units in the example to px which works on the surface but there are severe problems when the text is enlarged, not so with ems.

Apart from the drop cap example a major benefit of relative units is increased accessibility across a wider range of browsers. When using pixels, some versions of IE on Windows are unable to override pixel-based units. This means someone who needs to increase the text size can’t.

Some amazing sleight-of-hand can be achieved with relative units that is simply not possible with absolute-sized units. The downside is that it takes some adjustment to loosen one’s grip on the great precision that pixels offer and accept the slightly varying size rendering of relative units.

There are several other types of relative and absolute units as well.

Todd

On Mar 25, 2008, at 2:49 AM, larsboye wrote:

I converted your em-units to px to with the unfortunate result that the layout breaks apart. Apparently it is important to use ems to define the styles…

I have not fully understood the virtues of elastic layout so maybe you or another typographic guru on this forum could help me and other novices with some hints?

Thank you, Todd!

larsboye


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

You’re welcome. Here’s some interesting reading about ems, <http://www.w3.org/WAI/GL/css2em.htm>. Well, it’s as interesting as this stuff can possibly be I suppose.

Todd

On Mar 25, 2008, at 9:16 AM, larsboye wrote:

Thank you, Todd!