CSS - How much space a character takes up

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

CSS - How much space a character takes up

Post by Luke »

Is there a css property that designates how many pixels a single character should take up? I have markup like this...

Code: Select all

<div class="star_spacing">12345</div>
<div>
 <img src="#" width="10">
 <img src="#" width="10">
 <img src="#" width="10">
 <img src="#" width="10">
 <img src="#" width="10">
</div>
I need for the numbers to line up right with the images... so each character needs to space out 10 pixels...
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

Post by alex.barylski »

Use a fixed width font: Courier New, etc...?
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

eww! 8O
User avatar
John Cartwright
Site Admin
Posts: 11470
Joined: Tue Dec 23, 2003 2:10 am
Location: Toronto
Contact:

Post by John Cartwright »

Code: Select all

<style>
   #star_spacing ul {
      margin: 0;
      padding: 0;
      list-style: none;
		clear: both;              
   }
   #star_spacing li {
      float: left;
      width: 10px;
      border: 1px solid #000;
      text-align: center;
   }

</style>

<div class="star_spacing" id="star_spacing">
   <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul>
    <ul>
      <li><img src="#"></li>
      <li><img src="#"></li>
      <li><img src="#"></li>
      <li><img src="#"></li>
      <li><img src="#"></li>
    </ul>
</div> 
 
Last edited by John Cartwright on Wed Nov 01, 2006 1:32 pm, edited 1 time in total.
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

Thanks Jcart... that's basically how I have it now, but I was just hoping there was some sort of css property that could make it easier. Oh well. Thanks both of you guys!
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post by RobertGonzalez »

You can try using a text-align: justify in combination with letter-spacing using ex or em as a measurement. Maybe...?
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

good idea everah... I'll have to give that a try when I get back around to that job. seriously... that's a damn good idea. thanks.
User avatar
Zoxive
Forum Regular
Posts: 974
Joined: Fri Apr 01, 2005 4:37 pm
Location: Bay City, Michigan

Post by Zoxive »

What about letter-spacing?

Code: Select all

<style>
letter-spacing:10px;
</style>
-NSF
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

that determines the space between letters... I'm talking about the space letters actually take up. Thanks for the effort though! :D
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

Controlling the exact size and spacing of letters is almost impossible. Even on the same system there are differences between browsers. Couldn't you just code it in such a way that you don't depend on the exact font-size?

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>untitled</title>
	<style type="text/css" media="screen">
		* {margin:0;padding:0;}
		body {color:#555;font:arial,sans-serif;}
		ul {list-style:none;margin:10px;}
		ul li {float:left;width:10px;}
		ul li span {display:block;width:10px;font-size:10px;text-align:center;}
		ul li img { border:0;}
	</style>
	
</head>
<body>
 <ul>
	<li><span>1</span><img src="images/star.gif" width="10" alt=""></li>
	<li><span>2</span><img src="images/star.gif" width="10" alt=""></li>
	<li><span>3</span><img src="images/star.gif" width="10" alt=""></li>
	<li><span>4</span><img src="images/star.gif" width="10" alt=""></li>
	<li><span>5</span><img src="images/star.gif" width="10" alt=""></li>
</ul>
</body>
</html>
Just a quick example, works in FF. You can probably improve it more (using % or ems so you can even scale the textsize)
Post Reply