CODEWITHSUNDEEP
css
76987
76987

Reputation: 523

Styling the first letter of a particular word, etc

I'm trying to style a word with a big first letter and spacing for the other letters. My current solution is pretty ugly: see here (and a malfunctioning jsfiddle here).

Ideally, instead of something ugly like this: <dropcap>T</dropcap><span style="letter-spacing:.2em;">HERE</span><span style="margin-left:-.2em;"> is</span> nothing more unreasonable...

I could have something sensible like this: <dropcap>THERE</dropcap> is nothing more unreasonable...

Any ideas? Thanks.

Upvotes: 2

Views: 229

Answers (2)

Muhammad Ahsan
Muhammad Ahsan

Reputation: 1954

Or maybe you can use this JS solution i found

http://webplatform.adobe.com/dropcap.js/

Upvotes: 0

thirtydot
thirtydot

Reputation: 228152

You could just use the :first-letter pseudo-element.

The :first-letter pseudo-element is mainly used for creating common typographical effects like drop caps. This pseudo-element represents the first character of the first formatted line of text in a block-level element, an inline block, a table caption, a table cell, or a list item.

It's supported in IE8+ and all modern browsers.

For example: http://jsfiddle.net/HTnBP/4/

For the other half of your question, try:

T<span>HERE</span>

div > span:first-child {
    letter-spacing: .2em;
    margin-right: -.2em
}

http://jsfiddle.net/HTnBP/5/

I don't really see the point in using a custom dropcap element. Unless you don't mind adding extra complexity to support IE8 and lower, or you simply don't care about those browsers.

Upvotes: 4

Related Questions