SoftTimur SoftTimur - 6 months ago 19
HTML Question

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?

Answer

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>