(Devanagari Font) How to ensure all parts of the text are visible in a <select>?

Question

I'm using a Google font Noto Sans to render English text along with Hindi (Devanagari) in a <select>
But some of the Hindi characters seem to be cut off from the top, like in the snippet below:
(The actual text to be rendered is shown below the <select>)

const select = document.querySelector("#sel")
, printOption = () => {
  const index = select.selectedIndex, selectedText = select.options[index].text
  document.querySelector("#text").innerText = selectedText
}

select.addEventListener("change", printOption)
printOption()

body { padding: 15px; font-family: 'Noto Sans'; }
select, div { font-size: 36px; }
select:focus{ outline: none; }

/* The below rules do not seem to work */
select{
  /* padding: 15px; */
  /* height: 70px; */
  /* line-height: 50px; */
}

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap" />
<select id="sel">
  <option selected value="1">कोविड 19 केस / Covid 19 Cases</option>
  <option value="2">लिंग अनुपात / Sex Ratio</option>
  <option value="3">वन क्षेत्र / Forest Area</option>
</select>
<br/><br/>
<div id="text"></div>

What could be the fix for the same?
I've tried a few properties (mentioned in the CSS code) which didn't give desired results.

Answer 1

You have "included" Noto Sans in your page but you're not using the font on the select element! So:

The select element is rendered using Arial (user agent stylesheet). The characters not present in Arial are rendered using Nirmala UI - a fallback font chosen by the browser or OS:

The line height of the select element will be that of Arial. But each font has its own normal line height and the fallback font seems to require a taller line height in order to display the characters fully so it gets clipped.

The solution is simple: use the Noto Sans font on select element which seems to contain all the characters you want to display:

body {
  font-family: "Noto Sans";
}
select {
  /* using inherit instead of explicit font name */
  font-family: inherit;
  font-size: medium;
}
select:nth-of-type(2) {
  font-size: 1.5em;
}
select:nth-of-type(3) {
  font-size: 2em;
}

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap" />

<select>
  <option selected value="1">????? 19 ??? / Covid 19 Cases</option>
  <option value="2">???? ?????? / Sex Ratio</option>
  <option value="3">?? ??????? / Forest Area</option>
</select>
<br>
<select>
  <option selected value="1">????? 19 ??? / Covid 19 Cases</option>
  <option value="2">???? ?????? / Sex Ratio</option>
  <option value="3">?? ??????? / Forest Area</option>
</select>
<br>
<select>
  <option selected value="1">????? 19 ??? / Covid 19 Cases</option>
  <option value="2">???? ?????? / Sex Ratio</option>
  <option value="3">?? ??????? / Forest Area</option>
</select>