Setting Character Width with CSS

How to set character width in html/css

You are looking for a monospace font...

Here are some examples: https://fonts.google.com/?category=Monospace

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.

Specify width in characters

1em is the height of an M, rather than the width. Same holds for ex, which is the height of an x. More generally speaking, these are the heights of uppercase and lowercase letters.

Width is a totally different issue....

Change your example above to

<div>
    <span>1</span> 3 5 7 9 1 3 5 7 9 1
</div>

and you will notice width and height of the span are different. For a font-size of 20px on Chrome the span is 12x22 px, where 20px is the height of the font, and 2px are for line height.

Now since em and ex are of no use here, a possible strategy for a CSS-only solution would be to

Create an element containing just a
Let it autosize itself
Place your div within and
Make it 10 times as large as the surrounding element.

I however did not manage to code this up. I also doubt it really is possible.

The same logic could however be implemented in Javascript. I'm using ubiquitous jQuery here:

<html>
  <head>
    <style>
      body { font-size: 20px; font-family: Monospace; }
    </style>
    <script 
      type="text/javascript" 
      src ="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js">
    </script>
  </head>
  <body>
    <div>1 3 5 7 9 1 3 5 7 9 1</div>
    <script>
      $('body').append('<div id="testwidth"><span> </span></div>');
      var w = $('#testwidth span').width();
      $('#testwidth').remove();
      $('div').css('width', (w * 10 + 1) + 'px');       
    </script>
  </body>
</html>

The +1 in (w * 10 + 1) is to handle rounding problems.

how to set a specific pixel or character width limit for a text in css

You can do this by giving you set-width class the following properties:

display: inline-block;
width: 100px;
text-align: center;

The combination of the above properties will make the browser threat the element as a box that flows with the text like a button or image, the browser will then make it exact 100px large, and center the text using the text-align attribute.

It's possible to get/set the width of a character?

I don't think you can use parseInt() for this matter, at least not at first.
You first need to divide the numbers as a float (parseFloat()) and then you can round the result, but if you round it using parseInt first you'll have a precision problem.

Also, pay attention to the element's default padding, which can affect your calculations.

How to set width of a text character fixed in any device with CSS & HTML

Finally I realized that mobile browsers adding some extra letter spacing to increase readability of text. So In my case that's the reason why I'm getting different widths of text which are in same font size only in mobile devises.(I mean mobile devises as Smart Phones) So I add some JavaScript code which decreases line spacing only in mobile devises. My problem solved. It worked as I expected.

<script>
        if (/Android|iPhone|iPad/i.test(navigator.userAgent)) {
            document.documentElement.style.letterSpacing = "-1px";
        }
</script>

Thank all who trying to help me

How to set width base on characters

Not sure about CSS solution but,

You can do such thing using JavaScript, but it's not very convenient.

Demo here: https://jsbin.com/fecevopara/1/edit?html,css,js,console,output

Try to change text in html to see how width changes.

const container = document.getElementById('container')

const textLength = container.innerText.length

if (textLength > 10) {

  container.style.width = '50px'

}

if (textLength > 20) {

  container.style.width = '100px'

}

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width">

  <title>JS Bin</title>

</head>

<body>

  <div id="container" style="display: inline-block; width: 10px; background: #ccc">

   Some text goes hereeeee

  </div>

</body>

</html>

Alignment in css and setting text width

For 1 you can easily adjust the element's position since it's positioned absolute and its parent is also a positioned element. You can adjust the top property to align the two of them to your preferred layout.

To achieve 2 you can achieve it albeit with overflows if your paragraph is too long for the container's width. See this SO post for your reference: Wrap a text within only two lines inside div. Basically add the following code to your CSS:

.zoom>div {
  line-height: 1.5em;
  height: 3em;       /* height is 2x line-height, so two lines will display */
  overflow: hidden;  /* prevents extra lines from being visible */
}

Lastly, for number 3, to fit the images inside the circle-container you can just increase its padding till the images do not overflow, else you can also set an overflow property for it in the case that it does.

See the snippet below:

.zoom {
  transition: transform .2s;
  /* Animation */
}

.zoom>div{
  line-height: 1.5em;
  height: 3em;
  font-size: 8px;
  overflow: hidden;
}

.zoom:hover {
  transform: scale(1.5);
  /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

.Title {
  text-align: center;
  font-family: "Times New Roman", Times, serif;
  font-weight: bold;
}

.circle-container {
  position: relative;
  width: 30em;
  height: 28em;
  padding: 5em;
  /*2.8em = 2em*1.4 (2em = half the width of a link with img, 1.4 = sqrt(2))*/
  border: double 1px;
  border-radius: 50%;
  margin: 1.75em auto 0;
  border-color: #0f69af !important;
  display: flex;
}

.circle-container a {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4em;
  height: 4em;
  margin: -2em;
}

.circle-container img {
  display: block;
  width: 100%;
}

.deg0 {
  transform: translate(13em);
  top: 40% !important;
}

/* 12em = half the width of the wrapper */

.deg45 {
  transform: rotate(45deg) translate(12em) rotate(-45deg);
}

.deg135 {
  transform: rotate(135deg) translate(12em) rotate(-135deg);
}

.deg180 {
  transform: translate(-13em);
  top: 40% !important;
}

.deg225 {
  transform: rotate(270deg) translate(12em) rotate(-270deg);
}

.deg315 {
  transform: rotate(315deg) translate(12em) rotate(-315deg);
}

<div class="circle-container">
  <a href="#" class="center">
    <div class="zoom"><img src="https://cdn.pixabay.com/photo/2022/01/28/18/32/leaves-6975462_960_720.png" alt="Sample Image"> </div>
  </a>
  <a href="#" class="deg0">
    <div class="zoom">
      <div class="Title">Lorem ipsum dolor sit amet</div><img src="https://cdn.pixabay.com/photo/2017/07/07/22/18/frame-2482970_960_720.png" alt="Sample Image"></div>
  </a>
  <a href="#" class="deg45">
    <div class="zoom">
      <div class="Title">Lorem ipsum dolor sit amet</div><img src="https://cdn.pixabay.com/photo/2017/07/07/22/18/frame-2482970_960_720.png" alt="Sample Image"></div>
  </a>
  <a href="#" class="deg135">
    <div class="zoom">
      <div class="Title">Lorem ipsum dolor sit amet</div><img src="https://cdn.pixabay.com/photo/2017/07/07/22/18/frame-2482970_960_720.png" alt="Sample Image"></div>
  </a>
  <a href="#" class="deg180">
    <div class="zoom">
      <div class="Title">Lorem ipsum dolor sit amet </div><img src="https://cdn.pixabay.com/photo/2017/07/07/22/18/frame-2482970_960_720.png" alt="Sample Image"></div>
  </a>
  <a href="#" class="deg225">
    <div class="zoom">
      <div class="Title">Lorem ipsum dolor sit amet</div><img src="https://cdn.pixabay.com/photo/2017/07/07/22/18/frame-2482970_960_720.png" alt="Sample Image"></div>
  </a>
</div>

Setting Character Width with CSS

How to set character width in html/css

setting character width with css

Edit:

Specify width in characters

how to set a specific pixel or character width limit for a text in css

It's possible to get/set the width of a character?

How to set width of a text character fixed in any device with CSS & HTML

How to set width base on characters

Alignment in css and setting text width

Related Topics

Leave a reply

How to set character width in html/css

setting character width with css

Edit:

Specify width in *characters*

how to set a specific pixel or character width limit for a text in css

It's possible to get/set the width of a character?

How to set width of a text character fixed in any device with CSS & HTML

How to set width base on characters

Alignment in css and setting text width

Related Topics

Leave a reply

Specify width in characters