Jump to content

Community

DaffyDuck

Automatically enlarge emojis, if on their own line.

Recommended Posts

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:

🙂

Share this post


Link to post
Share on other sites
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!

Share this post


Link to post
Share on other sites
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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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!

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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. 

Share this post


Link to post
Share on other sites
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. 👍🏻

Share this post


Link to post
Share on other sites
On 10/10/2019 at 7:18 AM, Nathan Explosion said:

Do you mean this:

image.thumb.png.6162c7a4b2baca9affcd450b7a23ed2b.png

or this:

image.thumb.png.d59360ba0d749f355e64aba35e72d22a.png

 

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?

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...