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

Question

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.

score 1 · Answer 1 · answered Jun 11 '20 at 11:35

1

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>

answered Jun 11 '20 at 11:35

Sapinder Singh

559
6
21

Thank you for the response. But I have to get the same text size in pixels. It doesn't matter actual width varies with the devise because I'm working on a real time code editor to discuss programming in a group. I have to send my cursor position to other viewers in pixels because to draw shapes. – Chamod Jun 11 '20 at 12:11
My problem is when I draw a line under some character, mobile viewers get a line at a correct vertical position and wrong horizontal position because of this inequality of character widths. No matter in character heights and no matter with other PC viewers (Ex: When I draw a line under 44th character in 2nd line mobile viewers see a line under 43 rd character in 2nd line) I should have to use pixel because of this drawing options. – Chamod Jun 11 '20 at 12:15
does this answer your question? [Specify width in characters](https://stackoverflow.com/q/8186457/12997674) – Sapinder Singh Jun 11 '20 at 13:22
Sorry. No. I previously noticed that – Chamod Jun 11 '20 at 13:59

score 0 · Answer 2 · answered Jun 11 '20 at 11:33

0

<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.

answered Jun 11 '20 at 11:33

ApkChanlee

51
1
7

My code is a sample to demonstrate my problem. Not my real project. I'm working on a real time code editor to discuss programming in a group. I have to send my cursor position to other viewers in pixels because to draw shapes. My problem is when I draw a circle in some word in the other viewers get a circle at wrong position because of this inequality of character widths. I should have to use pixel because of this drawing options. – Chamod Jun 11 '20 at 11:48

score 0 · Accepted Answer · answered Jun 15 '20 at 16:31

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

3 Answers3