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

Question

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

1k Views Asked by Chamod At 04 April 2025 at 10:21

I want to show the text in my text area in any device with the same width in pixels. Means I want to set the charter width in pixels which is unique in any device (Desktop/Mobile).

<html>
<head>
    <style>
        textarea {
            font-style: Consolas;
            font-size: 20px;
            line-height: 30px;
            width: 264px;
            height: 60px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <textarea>Hello world. How are you&#13;&#10;Hello world. How are you</textarea>
</body>
</html>

This is my code. This not show the width of text same in all devices. I have attached a screen shot. Screen Shot comparing with the view in a mobile device

I have to work with pixels because I'm creating a real time code editor with drawing tools. Are there any CSS font properties to set to get rid of this issue or any other solutions ?

Edit:- After some searching I found that behavior happens because text rendering of browser. I change text-rendering property to available options but no use.

Original Q&A

There are 3 best solutions below

ApkChanlee On 11 June 2020 at 11:33

<html>
<head>
    <style>
        textarea {
            font-style: Consolas;
            font-size: 7vw;
            line-height: auto;
            width: 100%;
            height: auto;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <textarea>Hello world. How are you&#13;&#10;Hello world. How are you</textarea>
</body>
</html>

Pixels may vary on devices, you can use vw (viwport width) for responsive text and use percentage value for width for responsive width.

Sapinder Singh On 11 June 2020 at 11:35

I might not have understood correctly what you want, but I think you want the text to occupy same proportion of space on different screen sizes? If so, you could use vw lenght unit which stands for viewport width-

<html>
<head>
    <style>
        textarea {
            font-style: Consolas;
            font-size: 6vw; /*adjust it to what you want*?
            line-height: 30px;
            width: 264px;
            height: 60px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <textarea>Hello world. How are you&#13;&#10;Hello world. How are you</textarea>
</body>
</html>

**Chamod** · Accepted Answer

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 of a text character fixed in any device with CSS & HTML

There are 3 best solutions below

Related Questions in HTML

Related Questions in CSS

Related Questions in FONTS

Related Questions in TEXTAREA

Related Questions in TEXT-WIDTH

Trending Questions

Popular # Hahtags

Popular Questions