In HTML/CSS how can I make emoji the same size as the text?

user_15551159 0
Viewed 1869

On my web page I have a popup image in a series of nested divs. At the top div I have a title. While the higher resolution of this image is loading, I display an emoji hourglass (⏳) in the title. When completed, I remove the hourglass. When the hourglass is removed, the div with the title text in it gets a little smaller, vertically. How can I have the emoji equal to the size of the text so that it does not make my div any taller?

Here is a code snippet that shows a div with a cyan background color and an emoji. When the button is clicked, the innerHTML is replaced with text without emoji and you can see the vertical size get smaller.

document.getElementById("button").onclick =
   () => {document.getElementById("div").innerHTML = "This is some text without emoji"};
div.textWithEmoji {
    font-size : medium;
    background-color : cyan;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Emoji Size Test</title>
</head>

<body>

<h1>Emoji Size Test</h1>

<div class="textWithEmoji" id="div">
    This is some text with emoji ⏳
</div>

<br>

<button id="button" type="button">Remove Emoji</button>

</body>

</html>

I don't want to force the div height to a specific value as the font-size is a variable in my page.

I have tried setting the size of the emoji to 75% and that works on Chrome and iOS but there is no guarantee that that will work on every platform.

Any ideas how I can get this to do what I want?

Thanks,

Mike

emoji css html
4 Answers

Set a line-height to your div:

$("#button").click(function() {
  $('.textWithEmoji').html("This is some text without emoji")
});
div.textWithEmoji {
  font-size: medium;
  background-color: cyan;
  line-height: 1.2em;
  margin: 5px 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Emoji Size Test</h1>

<div class="textWithEmoji" style="font-size:10px;">
  This is some text with emoji ⏳
</div>

<div class="textWithEmoji">
  This is some text with emoji ⏳
</div>

<div class="textWithEmoji" style="font-size:20px;">
  This is some text with emoji ⏳
</div>

<div class="textWithEmoji" style="font-size:30px;">
  This is some text with emoji ⏳
</div>



<button id="button" type="button">Remove Emoji</button>

user_86203330

Try putting the icon inside a <span> element that holds the emoji. Like:

<p>This is some text with emoji <span class="emoji">⏳</span> </p>

Then try to give the <span> element some CSS to make it with the same size of the text. Of course this solution is hardcoded. Something like:

.emoji {
     font-size: 1vw; // vw, vh, em, rem, px or %
     // OR
     transform: scale(1.25);
 }
user_118608000

You can wrap it in a span, give it a class, and reduce the font-size:

document.getElementById("button").onclick =
   () => {document.getElementById("div").innerHTML = "This is some text without emoji"};
div.textWithEmoji {
    font-size : medium;
    background-color : cyan;
}

.icon {
    font-size: 75%;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Emoji Size Test</title>
</head>

<body>

<h1>Emoji Size Test</h1>

<div class="textWithEmoji" id="div">
    This is some text with emoji <span class="icon">⏳</span>
</div>

<br>

<button id="button" type="button">Remove Emoji</button>

</body>

</html>

user_23241540

You can put it in span and give font-size

document.getElementById("button").onclick =
   () => {document.getElementById("div").innerHTML = "This is some text without emoji"};
div.textWithEmoji {
    font-size : medium;
    background-color : cyan;
}
span { font-size: 12px;}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Emoji Size Test</title>
</head>

<body>

<h1>Emoji Size Test</h1>

<div class="textWithEmoji" id="div">
    This is some text with emoji <span>⏳</span>
</div>

<br>

<button id="button" type="button">Remove Emoji</button>

</body>

</html>

user_135448490
Related