Make first letters of words taller

Forum Moderators: not2easy

Message Too Old, No Replies

Make first letters of words taller

How do I replace this stuff w/ CSS?

dwilson

7:03 pm on Mar 12, 2004 (gmt 0)

I have the following block of code for the main heading on my site:

B
LACK
 W
IDGET
 R
EVIEW

How do I acheive the same effect using CSS? Only w/o the extra spaces that are my SERPS?

It currently shows as B LACK W IDGET R EVIEW which doesn't look bad but means I make first page for "Lack Idget" and am not to be found for "Black Widget".

I want to change to using an <H1> there, but would like to keep making the first letters taller than the others. Can CSS do that?

Thanks.

your_store

7:11 pm on Mar 12, 2004 (gmt 0)

What you're looking for is the first-letter psudo element. Unfortunately, it only works in standard compliant browsers, aka not Win IE.

More at W3C

[w3.org...]

Palehorse

7:15 pm on Mar 12, 2004 (gmt 0)

B
LACK
 W
IDGET
 R
EVIEW

In your CSS file add:
.BigLetter {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: normal;
}

Then simply Highlight the first letter of the word and assign it a class:

Black Widget Review

You also want your tag defined. That way you don't need to use the font tag at all. In css you really don't even need a font tag ever.

ronin

7:25 pm on Mar 12, 2004 (gmt 0)

Following on from what palehorse says, you could put something like this in your CSS file:

p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-style: normal;
font-weight: bold;
font-size: 12px;
}

p strong {font-size: 16px;}

And then write:


<p>
<strong>B</strong>lack
<strong>W</strong>idget
<strong>R</strong>eview
</p>

in your html document.

dwilson

7:42 pm on Mar 12, 2004 (gmt 0)

Thanks! I'll give these suggestions a try!

grahamstewart

7:54 pm on Mar 12, 2004 (gmt 0)

Or better still use percentage based relative sizing like this..


.big { 
  font: 130% Arial, Verdana, sans-serif; 
} 
  
<p> 
  <span class="big">B</span>lack 
  <span class="big">W</span>idget 
</p>

DrDoc

1:28 am on Mar 13, 2004 (gmt 0)

Or even better -- just make it all small-caps :)

p {
font-variant: small-caps;
}

This Is My Sentence

mipapage

8:42 am on Mar 13, 2004 (gmt 0)

I'm pretty sure that I had the first letter pseudo element work for me in IE, as follows:

p:first-letter {blah blah}

At first it did, then didn't work for me, then, after an hour or so of bug killing, I realized that you *must* have a space between the selector and the first curly brace, or IE chokes:

p:first-letter{blah blah} -> Choke

p:first-letter {blah blah} -> Happy

encyclo

12:44 pm on Mar 13, 2004 (gmt 0)

Black
Widget

If you do this, you'll still be in first place for "lack idget", because you're still splitting the words.

mipapage has the right method with the :first-letter pseudo-element. Note that it works in IE5.5+ only (as well as Mozilla, Opera, etc.).

Try something like:

CSS 
============================== p { 
font-size:medium; 
} 
span.hilite:first-letter  
{ 
font-size:xx-large 
} 
============================== 
HTML 
============================== 
<p><span class="hilite">Black</span> <span class="hilite">Widgets</span></p> 
==============================

grahamstewart

1:30 pm on Mar 14, 2004 (gmt 0)

you *must* have a space between the selector and the first curly brace

Nice one - I assumed that it was just another bit of missing CSS functionality by Microsoft, but if it works (even badly) then it is definitely the best way to go.

mipapage

1:41 pm on Mar 14, 2004 (gmt 0)

Yeah, that was a bad one. I was in the middle of a long strech of coding, low on sleep and hopped up on caffeine. It was working fine, then I 'optimised' my CSS, and put that file live, and poof! it stopped working. I thought I was beginning to go nutz...

That space problem, along with the 'stray comma' problem that strikes Mozilla, together are two sneaky little bugs...

Stray Comma => #my div p, #my div ul, {blah blah}

Post 1000! Woohoo! [webmasterworld.com]