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.
