Jerm993
06-30-2010, 06:31 AM
In a post on css-tricks, (http://css-tricks.com/forums/viewtopic.php?f=2&t=8241) I recently posted about a problem i encountered with Google's web font directory not having a small-caps variant. So after some messing around i came up with a way to achieve that effect using and inline unordered list and some text sizing;
<html>
<head>
<link href=' http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css'/>
<style>
body{ background: #000; color: #fff; }
#heading li{ display: inline; }
#headerf{
font: normal 24px/26px 'Yanone Kaffeesatz';
letter-spacing: .4px;
text-transform: uppercase;
}
#header{
font: normal 15px/26px 'Yanone Kaffeesatz';
text-transform: uppercase;
letter-spacing: 1.2px;
}
</style>
</head>
<body>
<ul id="heading">
<li id="headerf">j</li>
<li id="header">eremy</li>
<li id="headerf">c</li>
<li id="header">arlsten</li>
</ul>
</body>
The problem comes when trying to use this text dynamically, the words are split up in separate list elements, If I were to use this for say a header in Wordpress i wouldn't be able to use the admin panel to type in the site name as i could only place it in one element(As far as i know). My questions; first, Is there possibly a better way to achieve the effect? Second; If not, is there possibly some jquery or JavaScript, that could force the separate list elements to act as one?
Thanks in advance,
Jeremy Carlsten
<html>
<head>
<link href=' http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css'/>
<style>
body{ background: #000; color: #fff; }
#heading li{ display: inline; }
#headerf{
font: normal 24px/26px 'Yanone Kaffeesatz';
letter-spacing: .4px;
text-transform: uppercase;
}
#header{
font: normal 15px/26px 'Yanone Kaffeesatz';
text-transform: uppercase;
letter-spacing: 1.2px;
}
</style>
</head>
<body>
<ul id="heading">
<li id="headerf">j</li>
<li id="header">eremy</li>
<li id="headerf">c</li>
<li id="header">arlsten</li>
</ul>
</body>
The problem comes when trying to use this text dynamically, the words are split up in separate list elements, If I were to use this for say a header in Wordpress i wouldn't be able to use the admin panel to type in the site name as i could only place it in one element(As far as i know). My questions; first, Is there possibly a better way to achieve the effect? Second; If not, is there possibly some jquery or JavaScript, that could force the separate list elements to act as one?
Thanks in advance,
Jeremy Carlsten