Automatically enlarge emojis, if on their own line.

[DaffyDuck]

It would be convenient to have a function (or, even a plugin/extension) that relies emojis, if they are on a line of their own, to a definable size.

emojis are generally pretty small, which works fine if they are inline - but on a line of their own, they look better when enlarged. Most of the messaging apps do that nowadays.

It's cool like this --> 🙂

But by itself, looks better like this:

🙂

[Rikki]

You could actually do this already - add this to your custom.css theme file:

.ipsType_richText span.ipsEmoji:only-child {
	font-size: 48px;
}

 

[Maxxius]

superb trick 😄  I'm taking that with me!

[DaffyDuck]

17 hours ago, Rikki said:

You could actually do this already - add this to your custom.css theme file:

.ipsType_richText span.ipsEmoji:only-child {
	font-size: 48px;
}

 

Awesome trick - thanks!

[DaffyDuck]

On 10/6/2019 at 8:06 PM, Rikki said:

You could actually do this already - add this to your custom.css theme file:

.ipsType_richText span.ipsEmoji:only-child {
	font-size: 48px;
}

 

Except - this makes ALL emoji larger -- even those that are inline on the same line (which, in my example, should have remained untouched).

Any extension to that custom CSS to make that distinction?

[Maxxius]

yeah well that truly does not work that well too.

if you put 2 smileys in one line the last one is big instead of both being small. goal what I think it was just as in skype. if an emoji is the only thing in one line then it is big size. if there is text or more than 1 emoji - all remains as usual.

[Hexsplosions]

5 hours ago, DaffyDuck said:

Except - this makes ALL emoji larger -- even those that are inline on the same line (which, in my example, should have remained untouched).

That's because the emoji is the only child:

<p>
	Hello&nbsp;<span class="ipsEmoji">😃</span>
</p>

The text does not count as a child.

I'm not sure what the answer is though.

[Rikki]

5 hours ago, DaffyDuck said:

Except - this makes ALL emoji larger -- even those that are inline on the same line (which, in my example, should have remained untouched).

Any extension to that custom CSS to make that distinction?

Whoops, you're right. Text isn't a 'child' in CSS, so actually I don't think there'd be a way to do this with CSS alone. Sorry for the confusion!

[DaffyDuck]

Bummer. Doesn’t the emoji identify itself differently than text?

 

[Hexsplosions]

1 hour ago, DaffyDuck said:

Bummer. Doesn’t the emoji identify itself differently than text?

Yes, but this requires that the emoji is the only child of the container it is in. Since text is not considered a child it doesn't work.

[Nathan Explosion]

Do you mean this:

or this:

 

First one:

.ipsEmoji:not(:only-child):first-child {
 font-size:48px;
}

Second one:

.ipsEmoji:not(:only-child) {
 font-size:48px;
}

 

[opentype]

I guess this would be the version that makes sense. Some messaging apps use it this way. 

[Nathan Explosion]

Yeah, that's definitely more difficult....and my suggestions earlier fall over if it's a single emoji on its own. Back to the drawing board!!

[Maxxius]

The Skype does this and I love that feature :)

[Hexsplosions]

If I’m to be totally honest, I’d prefer this be done through the editor. The whole point of a WYSIWYG editor is to be able to see how it’ll look when posted, not for it to be displayed differently to how it was composed.

I therefore think this is a good feedback post and something best accomplished through the editor.

[opentype]

2 minutes ago, The Heff said:

If I’m to be totally honest, I’d prefer this be done through the editor. The whole point of a WYSIWYG editor is to be able to see how it’ll look when posted, not for it to be displayed differently to how it was composed.

This assumes it would show differently in the editor, which is not necessarily the case. The CSS could apply there as well. 

[Hexsplosions]

Just now, opentype

2 minutes ago, The Heff said:

If I’m to be totally honest, I’d prefer this be done through the editor. The whole point of a WYSIWYG editor is to be able to see how it’ll look when posted, not for it to be displayed differently to how it was composed.

This assumes it would show differently in the editor, which is not necessarily the case. The CSS could apply there as well. 

I hadn’t considered that. 👍🏻

[DaffyDuck]

On 10/10/2019 at 7:18 AM, Nathan Explosion said:

Do you mean this:

or this:

 

First one:

.ipsEmoji:not(:only-child):first-child {
 font-size:48px;
}

Second one:

.ipsEmoji:not(:only-child) {
 font-size:48px;
}

 

Somehow, either of these doesn't do anything, once added to the theme's custom.css file.

Anything else I should do?

[DaffyDuck]

On 10/10/2019 at 9:14 AM, opentype said:

This assumes it would show differently in the editor, which is not necessarily the case. The CSS could apply there as well. 

It actually doesn't - in the case of my forum's theme, it does work in the editor. It makes the emoji larger within the editor, but once posted, the emojis shows in the regular size.

So, we're missing something in this CSS.

I'm using this one:
 

.ipsEmoji:not(:only-child) {
 font-size:48px;
}

This may be related to the theme.

[Nathan Explosion]

On 10/20/2019 at 7:10 AM, DaffyDuck said:

This may be related to the theme

Most likely, yes. Provide a link to your site so that people can see the CSS that is being applied.

[GTServices]

2 things could be happening...

You added the css in the wrong stylesheet.

Or, something is overwriting it.

Try using...

font-size:48px !important;

[DaffyDuck]

https://chicabow.com

[DaffyDuck]