CODEWITHSUNDEEP
htmlcss
SoftTimur
SoftTimur

Reputation: 5510

Make a textarea where the width of each character is always the same

I have the following HTML code to make a textarea (it uses a class of Microsoft UI Fabric, but it is not very important).

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <title>Title</title>  
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js"></script>
    <link href="Office.css" rel="stylesheet" type="text/css" />
    <script src="https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js" type="text/javascript"></script>
    <link href="Common.css" rel="stylesheet" type="text/css" />
    <script src="Notification.js" type="text/javascript"></script>
    <script src="Home.js" type="text/javascript"></script>
    <link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/1.0/fabric.min.css">
    <link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/1.0/fabric.components.min.css">
</head>
<body class="ms-font-m">
    <div id="content-main">
    <div class="padding">
    <div class="ms-TextField ms-TextField--multiline">
        <textarea class="ms-TextField-field" id="my" spellcheck=false style="font-size: 18px">
            ABCDEFGHIJKLMNOP
            abcdefghijklmnop        
        </textarea>
    </div>
    </div>
    </div>
</body>
</html>

Here is how the result looks like:

enter image description here

As we can see, unlike eg, the question editor of stackoverflow, the width of each character in my textarea is not the same. In normal html without css, does anyone know how to make a text area such that the width of each character inside is always the same? If I still want to use css of Microsoft UI Fabric, where should I do the modification?

Upvotes: 5

Views: 1453

Answers (3)

Johannes
Johannes

Reputation: 67768

(EDITED - had mixed up monospace and monotype) just use a monospace font for that text field. In a monospace font all characters have the same width:

#my {
  font-family; monospace;
}

Upvotes: 2

Oriol
Oriol

Reputation: 288120

The problem is that fabric.components.css has this:

.ms-TextField.ms-TextField--multiline .ms-TextField-field {
  font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif;
}

So either modify your HTML classes to prevent that selector from selection your textarea, or set back the default font-familiy: monospace in a selector with more specificity.

@import 'https://appsforoffice.microsoft.com/fabric/1.0/fabric.min.css';
@import 'https://appsforoffice.microsoft.com/fabric/1.0/fabric.components.min.css';
.ms-TextField.ms-TextField--multiline .ms-TextField-field {
  font-family: monospace;
}
<div id="content-main">
  <div class="padding">
    <div class="ms-TextField ms-TextField--multiline">
      <textarea class="ms-TextField-field" id="my" spellcheck=false style="font-size: 18px">
        ABCDEFGHIJKLMNOP
        abcdefghijklmnop        
      </textarea>
    </div>
  </div>
</div>

Upvotes: 2

BananaNeil
BananaNeil

Reputation: 10762

You can replace the line:

<textarea class="ms-TextField-field" id="my" spellcheck=false style="font-size: 18px">

With

<textarea class="ms-TextField-field" id="my" spellcheck=false style="font-size: 18px; font-family: monospace;">

If you want to specify a specific monospace font, you can add it before the word monospace

<textarea class="ms-TextField-field" id="my" spellcheck=false style="font-size: 18px; font-family: 'DejaVu Sans Mono', monospace;">

Technically speaking, this is using inline css.

Upvotes: 2

Related Questions