CODEWITHSUNDEEP
htmlcsstextsemantics
Mau Di Bert
Mau Di Bert

Reputation: 59

How to get rid of accents just with CSS

Without using JS, I wanted to remove accents with CSS so the HTML continues semantically correct while visually achieving UPPERCASE without accents.

Example:

h1 {
  text-transform: uppercase;
  /*sth here*/
}
<h1>Fácil</h1>

Tks!

Upvotes: 6

Views: 2540

Answers (1)

Temani Afif
Temani Afif

Reputation: 273838

You can adjust the line-height and use overflow:hidden but pay attention when using a different font-family you may need another value:

h1 {
  text-transform: uppercase;
  line-height: 0.75em;
  overflow: hidden;
}
<h1>Fácil é â ä</h1>
<h1 style="font-size:25px">Fácil é â ä</h1>
<h1 style="font-size:18px">Fácil é â ä</h1>

With another font-family:

h1 {
  font-family:arial;
  text-transform: uppercase;
  line-height: 0.87em;
  overflow: hidden;
}
<h1>Fácil é â ä</h1>
<h1 style="font-size:25px">Fácil é â ä</h1>
<h1 style="font-size:18px">Fácil é â ä</h1>

Upvotes: 2

Related Questions