DTP


 
Lively discussions on the graphic arts and publishing — in print or on the web


Go Back   Desktop Publishing Forum > General Discussions > Web Site Building & Maintenance

Reply
 
Thread Tools Display Modes
Old 03-21-2005, 05:11 PM   #1
George
Member
 
George's Avatar
 
Join Date: Feb 2005
Posts: 1,036
Default HTML for small caps

I have about 30 instances in my web page, wherein small caps should be used, according to DTP standards. My font is 1em, and most of these small caps instances are in parenthetical comments set at 70% to size. I don't really find an HTML or CSS code for small caps; small font, yes, but I don't think that is the same thing.

So, what do I do. Leave it alone?? But then, what about my CSS print style sheet??

George
George is offline   Reply With Quote
Old 03-21-2005, 07:16 PM   #2
groucho
Staff
 
Join Date: Oct 2004
Posts: 490
Default

George, in my limited knowledge there IS no HTML code for "small caps". You'll simply have to define a smaller font size and use it.
groucho is offline   Reply With Quote
Old 03-22-2005, 05:23 AM   #3
ktinkel
Founding Sysop
 
ktinkel's Avatar
 
Join Date: Oct 2004
Location: In Connecticut, on the Housatonic River near its mouth at Long Island Sound.
Posts: 11,189
Default

Quote:
Originally Posted by groucho
George, in my limited knowledge there IS no HTML code for "small caps". You'll simply have to define a smaller font size and use it.
George is using Cascading Style Sheets, which does have a “small caps” property.

What it accomplishes, though, can vary with the font available, so your advice to define a smaller size would still be the best way to go.

   
__________________
[SIZE=2][COLOR=LemonChiffon]::[/COLOR][/SIZE]
[SIGPIC][/SIGPIC]
ktinkel is offline   Reply With Quote
Old 03-22-2005, 12:58 AM   #4
LoisWakeman
Staff
 
LoisWakeman's Avatar
 
Join Date: Jan 2005
Location: Uplyme, Devon, England
Posts: 1,402
Default

There is a CSS property: font-variant:small-caps

- but to work in true DTP fashion, the client computer needs to have the correct small caps font installed - and the most commonly used fonts don't have them, so the effect is simulated by upper-case scaled-down characters. You can use it in your print style sheet - but what you see may not be what your web site visitors see.

This is hardly news though, for all sorts of other reasons!
LoisWakeman is offline   Reply With Quote
Old 03-22-2005, 05:40 AM   #5
ktinkel
Founding Sysop
 
ktinkel's Avatar
 
Join Date: Oct 2004
Location: In Connecticut, on the Housatonic River near its mouth at Long Island Sound.
Posts: 11,189
Default

Quote:
Originally Posted by George
I have about 30 instances in my web page, wherein small caps should be used, according to DTP standards. My font is 1em, and most of these small caps instances are in parenthetical comments set at 70% to size. I don't really find an HTML or CSS code for small caps; small font, yes, but I don't think that is the same thing.

So, what do I do. Leave it alone?? But then, what about my CSS print style sheet??
There is a CSS small caps property, but because of the way web publishing works — you are dependent on the fonts available on the reader’s system — I find it very unpredictable to use.

So instead, when I want to have small caps appear, I use CSS to specify a smaller font-size, usually 0.8 to 0.9 em. (Using 0.7 em is risky — those who use 11px as a default font size will be getting only 8px tall caps, which might be quite unreadable on some screens.) All caps and small caps should always be slightly spaced apart, so I also add letter-spacing: 0.1 (or 0.15) em to the CSS rule for the caps.

When the text appears in Verdana or Georgia, this works well; in Arial or Times, not so well. There is a property, font-size-adjust, that would compensate for these discrepancies, which have to do with x-height. Unfortunately, it is one of a handful of useful properties that were defined in CSS 2 but not included in the current 2.1 version (and not supported in browsers). Another property, font-stretch, would also be useful for simulating small caps (which tend to be a bit wider and heavier than the standard ones), but it too was withdrawn.

Yet another property would help you with a problem you brought up recently on INETPUB, having to do with placement of the bullet in an unordered list — marker-offset would let you control how far away the bullet is from the item in the list. Alas, this too is not yet supported. Worse, there is no certainty that any of these will be in CSS 3 either.

   
__________________
[SIZE=2][COLOR=LemonChiffon]::[/COLOR][/SIZE]
[SIGPIC][/SIGPIC]
ktinkel is offline   Reply With Quote
Old 03-22-2005, 07:02 AM   #6
George
Member
 
George's Avatar
 
Join Date: Feb 2005
Posts: 1,036
Default

Quote:
Originally Posted by ktinkel
So instead, when I want to have small caps appear, I use CSS to specify a smaller font-size, usually 0.8 to 0.9 em....When the text appears in Verdana or Georgia, this works well; in Arial or Times, not so well...Yet another property would help you with a problem you brought up recently on INETPUB, having to do with placement of the bullet in an unordered list — marker-offset would let you control how far away the bullet is from the item in the list. Alas, this too is not yet supported. Worse, there is no certainty that any of these will be in CSS 3 either.
Kathleen, I knew you would know all about small caps. I like your system, but if it doesn't work that well in the back-up fonts, then I think I should probably leave them alone. In the 70%em, they look good enough. They're a little too big at the 1em in the normal text, but there are just a few instances of these in about 200 pages of text. I try as hard as I can to get what I want, but I accept what I can only get.

Regarding the marker offset, that is interesting to know. Actually, I decided I liked the postion of default. My code looked weird, because I had values for OL as well as LI. That's because, if I accomplished my alignments using just LI values, on changing resolution or using the browser zoom feature, the alignments changed. By establishing the alignments using both OL and LI, they remained constant in whatever resolution or zoom size I tried. It looks weird in coding, but it sure does work well in looking perfect on the screen with all resolutions and zoom sizes.

Something just occurred to me. It's not in the quote (I'm editing) but you said using .7em is risky for small caps. In DTP on this text, I use 12pt and 10 pt, for normal and parenthetical text. Do you think I should use something other than 70%em for my small font, or is your comment applicable only to small caps???

Thank you,
George
George is offline   Reply With Quote
Old 03-25-2005, 07:53 AM   #7
donmcc
Member
 
Join Date: Feb 2005
Location: Sarnia, Canada
Posts: 1,122
Default

Quote:
Originally Posted by George
Something just occurred to me. It's not in the quote (I'm editing) but you said using .7em is risky for small caps. In DTP on this text, I use 12pt and 10 pt, for normal and parenthetical text. Do you think I should use something other than 70%em for my small font, or is your comment applicable only to small caps???

Thank you,
George
In my opinion, you have to forget about DTP entirely when working on the web. The fact you are using 10 and 12 pt is irrelevant, because on the web the user should have the ability to choose the size they want (through the larger/smaller font options in the browser). As a result, a design should be built entirely using %, em or ex dimensions, rather than px, pt or linear dimensions like inch or cm. If you do this right, the users can select a larger size, and everything will scale for them. Of course, images will not scale, which is a problem on image intensive designs.

Don McCahill
donmcc is offline   Reply With Quote
Old 03-25-2005, 11:26 AM   #8
ktinkel
Founding Sysop
 
ktinkel's Avatar
 
Join Date: Oct 2004
Location: In Connecticut, on the Housatonic River near its mouth at Long Island Sound.
Posts: 11,189
Default

Quote:
Originally Posted by donmcc
… a design should be built entirely using %, em or ex dimensions, rather than px, pt or linear dimensions like inch or cm. If you do this right, the users can select a larger size, and everything will scale for them.
Good advice, although I don’t think ex is supported consistently in browsers (most think it means the height is .5em, but MSIE has its own ideas). Easier to use em or %.
Quote:
Originally Posted by donmcc
Of course, images will not scale, which is a problem on image intensive designs.
You can scale images by not specifying the height and then using width: 100% and placing them within a fluid DIV that has a width expressed in % or ems. But then you either have to make the images large enough to cover all possible widths (adding extra K) or live with pixelation if the viewer has a wide browser window.

And there is also a bit of window jump until everything is sorted out.

—Kathleen

   
__________________
[SIZE=2][COLOR=LemonChiffon]::[/COLOR][/SIZE]
[SIGPIC][/SIGPIC]
ktinkel is offline   Reply With Quote
Old 03-25-2005, 12:52 PM   #9
donmcc
Member
 
Join Date: Feb 2005
Location: Sarnia, Canada
Posts: 1,122
Default

Quote:
Originally Posted by ktinkel
Good advice, although I don’t think ex is supported consistently in browsers (most think it means the height is .5em, but MSIE has its own ideas). Easier to use em or %.
I agree completely. I only use ems personally, although I guess % would work as well. I didn't like the definition for ex I read in the w3 documentation, and as a result steer clear of it.

For a long time I was also perplexed by the definition of em (in w3). We all know that an em (in type) is the equivalent of a typeface's height, so how on earth can you define type's height based on something that is based on its own height.

Finally I realized that that def was incorrect as well, and they were basing the dimension on the height of the default font, which gives one something solid (relatively) to base things on.

I don't think programmers and others who don't understand typographica like ems, ens and exs should be allowed to play with them. <G>

Don McCahill
donmcc is offline   Reply With Quote
Old 03-25-2005, 01:20 PM   #10
ktinkel
Founding Sysop
 
ktinkel's Avatar
 
Join Date: Oct 2004
Location: In Connecticut, on the Housatonic River near its mouth at Long Island Sound.
Posts: 11,189
Default

Quote:
Originally Posted by donmcc
I don't think programmers and others who don't understand typographica like ems, ens and exs should be allowed to play with them. <G>
Me, either. And that includes fonts!

Let ’em use Courier, as Nature intended. <g>

   
__________________
[SIZE=2][COLOR=LemonChiffon]::[/COLOR][/SIZE]
[SIGPIC][/SIGPIC]
ktinkel is offline   Reply With Quote
Reply

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Drop caps in Indesign hsannerh Print Design 2 01-04-2007 08:48 PM
cAPS lOCK PeterArnel The Corner Pub 27 05-06-2006 12:30 AM
Small bug changing password BinkyM How to Use the Forum 1 10-29-2005 12:32 PM
Email Font Too Small JABTE05 Fonts & Typography 16 09-09-2005 04:31 PM


All times are GMT -8. The time now is 11:10 AM.


Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Contents copyright 2004–2014 Desktop Publishing Forum and its members.