Unicode (Devanagari) characters not showing up correctly in HTML dropdown and text-field tags

74 Views Asked by Jignesh Gohel At 14 August 2023 at 15:10

I have a HTML page in which I need to show a dropdown containing Devanagari characters.

The problem I am facing is that in the DOM the characters show up in expected manner but in the browser it doesn't. And the same problem is with displaying those characters in text-field tag (i.e. input type=text) but in div elements the characters shows up correctly. Please refer the snippet below reproducing the issue.

Note: In my original page I am using "Mustard UI" as CSS framework thus I have included its CDN in my snippet just to ensure that the problem I am facing is not related to fonts-issue.

<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://unpkg.com/mustard-ui@latest/dist/css/mustard-ui.min.css">
  </head>
  <body>
    <div>
      In Dropdown
      <select name="my-dropdown" class="my-dropdown">
        <option value="1">श्री गणेश</option>
      </select>
    </div>

    <div>
      Inside DIV: श्री गणेश
    </div>

    <div>
      In Text-field 
      <input type='text' value='श्री गणेश'>
    </div>
  </body>
</html>

Can anybody please explain what is the problem and how to fix it? I don't think this is a font issue because as said the characters appear correctly in DOM and also making those characters display in a div they appear in expected manner.

Following is the information of the browsers I have and in both of them I am facing the issue explained:

Mozilla Firefox 113.0.2 (64-bit), Google Chrome Version 114.0.5735.198 (Official Build) (64-bit) on Ubuntu 18.04.6 LTS.

Thanks.

Original Q&A

There are 1 best solutions below

Jignesh Gohel On 03 November 2023 at 15:20

Based on the @Andj's response adding the font CSS and applying the style, using the font, to select and input fields finally it works as expected. Please refer a working snippet below (the snippet is based on the one I have used in my question)

<html lang="en">

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://unpkg.com/mustard-ui@latest/dist/css/mustard-ui.min.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+Sans+Devanagari">

  <style>
    .my-dropdown {
      font-family: 'Noto Sans Devanagari', serif;
    }
    
    .my-text-input {
      font-family: 'Noto Sans Devanagari', serif;
    }
  </style>

</head>

<body>
  <div>
    In Dropdown
    <select name="my-dropdown" class="my-dropdown">
      <option value="1">श्री गणेश</option>
    </select>
  </div>

  <div>
    Inside DIV: श्री गणेश
  </div>

  <div>
    In Text-field
    <input type='text' value='श्री गणेश' class='my-text-input'>
  </div>
</body>

</html>

Thanks.

Unicode (Devanagari) characters not showing up correctly in HTML dropdown and text-field tags

There are 1 best solutions below

Related Questions in HTML

Related Questions in DROP-DOWN-MENU

Related Questions in TEXTFIELD

Related Questions in UNICODE-STRING

Trending Questions

Popular # Hahtags

Popular Questions