Page 1 of 1

CSS - How much space a character takes up

Posted: Wed Nov 01, 2006 12:45 pm
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...

Posted: Wed Nov 01, 2006 12:58 pm
by alex.barylski
Use a fixed width font: Courier New, etc...?

Posted: Wed Nov 01, 2006 1:03 pm
by Luke
eww! 8O

Posted: Wed Nov 01, 2006 1:27 pm
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> 
 

Posted: Wed Nov 01, 2006 1:32 pm
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!

Posted: Wed Nov 01, 2006 1:56 pm
by RobertGonzalez
You can try using a text-align: justify in combination with letter-spacing using ex or em as a measurement. Maybe...?

Posted: Wed Nov 01, 2006 2:03 pm
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.

Posted: Wed Nov 01, 2006 4:17 pm
by Zoxive
What about letter-spacing?

Code: Select all

<style>
letter-spacing:10px;
</style>
-NSF

Posted: Wed Nov 01, 2006 4:20 pm
by Luke
that determines the space between letters... I'm talking about the space letters actually take up. Thanks for the effort though! :D

Posted: Thu Nov 02, 2006 12:50 am
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)