Different font sizes in one word

Forum Moderators: not2easy

Message Too Old, No Replies

Different font sizes in one word

will it look bad in search results

StoutFiles

3:41 am on Sep 12, 2009 (gmt 0)

I have the word "Widgets". I want the word in all capitals but the first letter to be a larger capital letter. After using this code...

<a href="http://example.com">
<div class=m>W<span class=n>idgets</span></div>
</a>

Just checking if this is ok with search engines and that the word won't appear as two different entities, 'W' and 'idgets', when indexed.

D_Blackwell

4:21 am on Sep 12, 2009 (gmt 0)

Good question that someone else will need to answer definitively. I have a pretty good guess, but am inclined to let someone that knows for sure say for sure.
.........................

However, you can use :first-letter to avoid the span. Cleaner anyway.
.........................

Though okay, no need for quotes around Verdana. Quotes around family-name only needed for fonts that have a space or special need, e.g., "MS Trebuchet", sans-serif; - Single word family-name typically only comma separated in order of priority down to generic-family.

W3C - font-family: [w3.org]
.........................

I would be more concerned about wrapping <a> around the <div>. Works - but not, IMO, good practice.

Validation Output: 1 Error
1. Error Line 20, Column 15: document type does not allow element "div" here; missing one of "object", "ins", "del", "map", "button" start-tag
<div class="m">Widgets</div>
The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.
One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title></title>
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
.m {
font-family: Verdana, sans-serif; font-size: 18px; font-weight: bolder;
}
.m:first-letter {
color: red;
}
</style>
</head>
<body>
<div>
<a href="http://example.com">
<div class="m">Widgets</div>
</a>
</div>

</body>
</html>

swa66

4:56 am on Sep 12, 2009 (gmt 0)

I'd do it like this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <title>Test</title>
    <style type="text/css">
      .m {
        font: bolder 18px Verdana, sans-serif;
        display:block;
      }
      .m:first-letter {
        font-size: 13px
      }
      </style>
    </head>
  <body>
    <p><a href="http://example.com" class="m">Widgets</a></p>
  </body>
</html>

Note that :first-letter only works on "The :first-line pseudo-element can only be attached to a block-level element, inline-block, table-caption or a table-cell." accrding to the W3 at [w3.org...] , hence the display:block.

Only tried it in FF3.5 so far, take care, I vaguely remember IE6 crashing on :first-letter on an <a> ...