Make Narrow Characters with CSS

Make narrow characters with CSS

You can't reduce character width, but you can reduce letter-spacing.

span {
 letter-spacing: 0px;
}

setting character width with css

What you're looking for is transform:scale(x, y). For example:

-webkit-transform:scale(2.0, 1.0);
-moz-transform:scale(2.0, 1.0);
-ms-transform:scale(2.0, 1.0);
-o-transform:scale(2.0, 1.0);
transform:scale(2.0,1.0);

You kind of have to specify it for all the browsers, at least for now.

Edit:

I forgot to link my jsfiddle.

How to narrow text in CSS?

You can wrap your <ul> in a <div> and center it like this:

.list {
  max-width: 700px;
  margin: 0 auto;
}

.list li {
  margin-bottom: 1em;
}

<div class="list">
  <ul>
    <li>Your list here</li>
    <li>Your list here</li>
    <li>Your list here</li>
    <li>Your list here</li>
    <li>Your list here</li>
  </ul>
</div>

How can i ensure the paragraph have fixed number of characters with CSS?

Yes you can achieve what you're after using the code below

p.texts { overflow: hidden; max-width: 9ch; }

<p class='texts'>ninechars</p>

How to create small SPACES in HTML?

Don't use hacks that make no sense. If you wish to separate some words, I suggest you use the CSS property word-spacing:

.strangeNumbers {  word-spacing: 0.5em;}

<span class="strangeNumbers">123 456</span>

Making every character on a web page the same width

How about Courier New? monospace?

http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

How to make a hair space and thin space non-breaking?

U+2060 WORD JOINER is an invisible, zero-width character whose only effect is that it prevents line breaks at its position. Putting WORD JOINER after any whitespace character will therefore make it non-breaking. (Putting a WJ before the whitespace is not necessary because all spaces in Unicode automatically inhibit line-breaking immediately before them.)

UPD1 from the comments below:

The Unicode Standard absolutely requires WJ to retain its break-blocking property. However, there is a 7-years-old bug in Firefox with implementing the Unicode line-breaking algorithm, so in Firefox a combination whitespace+WJ works just like the whitespace without WJ.

In Chrome and Safari WJ works according to the standard.

UPD2 from the discussion in Twitter (credit to CharlotteBuff and FakeUnicode):

• It is possible to use U+034F COMBINING GRAPHEME JOINER in place of U+2060 WORD JOINER as a workaround for Firefox. It prevents line-breaking in Firefox, but not in Chrome and Safari. Also such use of U+034F CGJ is semantically dubious because CGJ has a different intended purpose. Nevertheless it is highly unlikely that U+034F CGJ can cause any kind of accessibility problems (with screenreaders and similar stuff).

• It is also possible to use U+200D ZERO WIDTH JOINER to prevent line-breaking. ZWJ works fine in the "big three" (Chrome, Safari, Firefox). However, ZWJ can have undesirable effects on the appearance of the surrounding text, because its purpose is to induce cursive joining in places where it otherwise wouldn’t happen automatically (e.g. in Arabic: م + ث + ل = مثل). If there are fancy ligatures in a font of the text with ZWJ, ZWJ can (and probably will) cause them to be triggered and change the shape of symbols nearby.

Note: the Wiki denotes ZWJ as «May break: Yes», but it is mistaken.

So, here are all the options to be seen and checked in your browser:

div {
  outline: 1px solid red;
  width: 20px;
  margin: 10px;
}

<!-- U+00A0 NO-BREAK SPACE -->
<!-- just for example -->
<div>hello world1</div>

<!-- U+200A HAIR SPACE + U+2060 WORD JOINER -->
<!-- works fine, but does not work in FF -->
<div>hello ⁠world2</div>

<!-- U+200A HAIR SPACE + U+034F COMBINING GRAPHEME JOINER -->
<!-- works, but 1) semantically incorrect and 2) does not work in Chrome and Safari-->
<div>hello ͏world3</div>

<!-- U+200D ZERO WIDTH JOINER + U+200A HAIR SPACE + U+200D ZERO WIDTH JOINER -->
<!-- works, even in FF! -->
<div>hello‍ ‍world4</div>

<!-- U+200A HAIR SPACE + U+200D ZERO WIDTH JOINER -->
<!-- works, even in FF! -->
<div>hello ‍world5</div>

How do I make text spanning multiple lines each have each letter vertically aligned in CSS?

If using a monospace font isn't possible then one way would be to wrap each character in a span element and force that to have a fixed width and the character to be centered within it.

Not very elegant and you'd want to employ some preprocessing rather than do it by hand - could be done fairly simply in Javascript.

Here's a trivial snippet with a couple of wide characters and a narrow one to show the idea:

span {
  width: 24px;
  display: inline-block;
  text-align: center;
}

<span>A</span><span> </span><span>i</span><br><span>i</span><span>A</span><span>X</span>

What characters can be used for up/down triangle (arrow without stem) for display in HTML?

Unicode arrows heads:

• ▲ - U+25B2 BLACK UP-POINTING TRIANGLE
• ▼ - U+25BC BLACK DOWN-POINTING TRIANGLE
• ▴ - U+25B4 SMALL BLACK UP-POINTING TRIANGLE
• ▾ - U+25BE SMALL BLACK DOWN-POINTING TRIANGLE

For ▲ and ▼ use ▲ and ▼ respectively if you cannot include Unicode characters directly (use UTF-8!).

Note that the font support for the smaller versions is not as good. Better to use the large versions in smaller font.

More Unicode arrows are at:

• http://en.wikipedia.org/wiki/Arrow_%28symbol%29#Arrows_in_Unicode
• http://en.wikipedia.org/wiki/Geometric_Shapes

Lastly, these arrows are not ASCII, including ↑ and ↓: they are Unicode.

Are there other whitespace codes like   for half-spaces, em-spaces, en-spaces etc useful in HTML?

Yes, many.

Including, but not limited to:

• [ ] hair space :   or  
• [ ] 6-per-em space :   _{^{(no character reference available)}}
• [ ] narrow no-break space :   _{^{(no character reference available)}}
• [ ] thin space :   or  
• [ ] 4-per-em space :   or  
• [ ] non breaking space :   or  
• [ ] punctuation space :   or   
• [ ] 3-per-em space :   or  
• [ ] en space :   or  
• [ ] figure space :   or   
• [ ] em space :   or  

span{background-color: red;}

<table>
<tr><td>non breaking space:</td><td> <span> </span> or <span> </span></td></tr>
<tr><td>narrow no-break space:</td><td> <span> </span></td></tr>
<tr><td>en space:</td><td> <span> </span> or <span> </span></td></tr>
<tr><td>em space:</td><td> <span> </span> or <span> </span></td></tr>
<tr><td>3-per-em space:</td><td> <span> </span> or <span> </span></td></tr>
<tr><td>4-per-em space:</td><td> <span> </span> or <span> </span></td></tr>
<tr><td>6-per-em space:</td><td> <span> </span></td></tr>
<tr><td>figure space:</td><td> <span> </span> or <span> </span></td></tr>
<tr><td>punctuation space:</td><td> <span> </span> or <span> </span></td></tr>
<tr><td>thin space:</td><td> <span> </span> or <span> </span></td></tr>
<tr><td>hair space:</td><td> <span> </span> or <span> </span></td></tr>
</table>

---

Related Topics