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