CODEWITHSUNDEEP
htmlcssencodingjspx
Adam
Adam

Reputation: 3013

Emoticon cause html text elements to not be vertically aligned

I have an .jspx file with html

<label for="foo">Country:</label>
<div id="foo"><c:out value="FooBar-islands"/></div> <br/>

The result of the above code is perfectly vertically aligned. Two columns with texts.

When I add an emoticon like below, they are not aligned anymore.

<label for="foo">Country:</label>
<div id="foo"><c:out value="🏁"/></div> <br/>

If I add an emoticon in the label as well:

<label for="foo">Country:🚩</label>
<div id="foo"><c:out value="🏁"/></div> <br/>

Then they are aligned again.

I want to make a minimal encroachment on the code of this page. It feels like when adding the emoticon the encoding changes and that messes with the text baseline.

Can I fix this cleverly without changing the structure with label/div? (I've been looking for invisible/unobtrusive emoticons to add to the label but havn't found any)

Upvotes: 0

Views: 356

Answers (1)

Adam
Adam

Reputation: 3013

I tried wrapping the row in a div with:

.centeredRow {
    display: flex;
    flex-direction:row;
    align-items: center;
}

Bigger incision than I would want, but the alignment is quite a bit better.

It is also not perfectly aligned. It is one pixel of, the text without emoticon encoding is one pixel higher. I assume this is still due to encoding text baseline shenanigans.

I invite better answers.

Upvotes: 0

Related Questions