Putting Emoticons in Paragraphs Without Affecting 'Line-Height'

Putting emoticons in paragraphs without affecting `line-height`

You can use

margin-top: [something];
margin-bottom: [something];
vertical-align: middle;

Where [something] is (containerLineHeight - imageHeight) / 2.

Also note you can just use margin: [something] 0 if there is no right nor left margin.

For example, since the image has height: 35px, assuming the container has line-height: 20px,

margin: -7.5px 0; // (20px - 35px) / 2

p {  line-height: 20px;}p img {  height: 35px;  display: inline;  vertical-align: middle;  margin: -7.5px 0;}

<p>Marzipan chupa chups marzipan. Bear claw donut candy powder cupcake tart. Tiramisu cotton candy jelly biscuit pie <img src="https://rawgit.com/github/gemoji/master/images/emoji/bowtie.png"> Jelly beans muffin croissant. Cupcake cookie pudding tootsie roll wafer. Bear claw jelly gummies sugar plum bear claw candy chocolate jelly. Donut brownie pie dessert cupcake donut oat cake marshmallow.</p>

emojis are causing change in line height

Set CSS property line-height to 1.2em could set the p tag to default height

p {
  line-height: 1.2em;  
}

Inline image affecting line-height

Replace

display:in-line;

with

position:absolute;

http://jsfiddle.net/ENch9/

OR

vertical-align:text-top;

http://jsfiddle.net/c6YqG/

Is it possible to stop a slightly-too-big inline image (e.g a smiley) from affecting the line height of the block of text it's in?

Depending on the desired image position and whether you have a fixed line-height in pixels you could set a maximum height on your image that equals your line-height and set vertical-align: bottom on the image so it fits exactly into your line.

See this fiddle for an example.

p {
    line-height: 18px;
}

p img {
    max-height: 18px;
    vertical-align: bottom;
}

<p>Some text <img src="/smiley.gif"> more text.</p>

Making emojis bigger and align with text.

Your content should always be placed within HTML tags that give context to what structural component you're trying to build. In the fiddle example below, we encapsulate the emoji inside a span tag which in turn is wrapped in a p tag for the wording content. By doing this, we can target specific CSS on the emoji content to vertical align within the p tag without having to deal with line-height. The font-size CSS property can control unicode characters and font-face content.

Update 1
I see now that you're trying to convert the chars to an image; your jsfiddle was broken because it wasn't using the jquery framework and you don't have to declare onLoad; instead this should all be set in the js settings window pane.

Update 2: updated jsfiddle

Example
https://jsfiddle.net/L8a9zazh/15/

HTML

<br><br>
<p>Hello world I'm buzz lt;/p>
<br><br>

<p id="wrong-test">Hello world I'm buzz <span class="emoji">lt;/span></p>

CSS

img.emojione {
  // Override any img styles to ensure Emojis are displayed inline
  margin: 0px !important;
  display: inline !important;

  height: auto;
  width: 50px;
}

p#wrong-test {
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  display: inline-block;
}

span.emoji {
  font-size: 30px;
  vertical-align: middle;
  line-height: 2;
}

Inline image height equal to font height

The default font-size for a webpage is 16px (reference) where no more setting is applied on document. You didn't set any font size to your html or body or paragraphs and so:

• the browser renders image by default font-size (16px) because there
  is no more setting to control images size.

• Text of webpage may not use default 16px for many other overriding settings as well as android initial settings, accessibility options, mobile friendly standards to render texts etc.

So you have to define your desired font size for entire document and then the texts and images height will have same reference.

Finally if you dont want to set initial font size, a javascript trick is to calculate the height of rendered lines and set it as image height. For example I suggest to extract first word from text and put it into a temporary div and after calculating the height of that div, set it as image height:

var myhtml=$('#imageId').parent().text();
var mywords=myhtml.split(" ");
var fisrtWord=mywords[0];
$(body).append('<div id="tempdiv">' + firstword + '</div>');
$('#imageId').height($('#tempdiv').heigh());
$('#tempdiv').remove();

Final note: the height of lines is about 1.5 times taller than the characters height. So you may reduce the calculated height by 1.5 to have better result.

What can you put in before pseudo content in css?

What exactly is that code inside content ? How can I modify it ?

The code inside the content: property represents two things:

The first part, \E0B3, is the CSS representation of a UTF-8 character icon.

As @shafayetmaruf has already shown in his output link, the symbol is a rectangular box (see also: https://utf8-icons.com/utf-8-character-57523).

To change the symbol being rendered you can simply change this to a different icon code (see https://www.utf8icons.com/ for other examples).

The second part, \00FE0E is the 'text-style' unicode variation selector. Basically, when using unicode icons some browser will render the icon as an emoji instead of as text. The drawback of this is that the emoji version can't be styled using CSS, whereas the text version can. The unicode variation selector forces the icon specified in the first part to render as text so that the developer can then style it with CSS.

See this SO question for more info:
How to prevent Unicode characters from rendering as emoji in HTML from JavaScript?

BTW - to find all this out all I did was google the different parts of the 'content' and as usual the Google God provided.

---

Related Topics