Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Change text on all websites with image/emoji

edited August 2017 in Style Development Chrome
1. Is there a way to replace every [alien emoji alt code] with the attached image on every website?

As everyone knows, emojies are not supported in Chrome (only a few show, like the alien emoji). I want to make a style to replace every text character from every website that represents an emoji with apple emojies (images).

2. Can that image (alien emoji) have the size coresponding to the text it's attached? So if the line-height: 1.7em, then the emoji/image has a size coresponding to the text size.

See attached images to see what I want to describe. Thanks!
160 x 160 - 23K
1690 x 916 - 451K
1690 x 916 - 451K


  • Stylish injects CSS to websites.
    CSS is about styles only, you can't change text (=content) with it.

    There are hacky solutions like hiding the text and inserting some new text by pseudo-elements but that won't work here because you can't choose a single character with CSS selectors.

    Maybe there is another hacky solution by creating your own font and ... no, you shouldn't even try.
  • Just TEST: 👽👽👽👽👽
  • As everyone knows, emojies are not supported in Chrome

    Actually, in the past I observed this 'lack of support' of coloured images of emoji characters (or some other astral-ish unicode) in Chrome compared to other browsers was caused just by incomplete or different "native" definitions for the default font stack / fallback fonts chain.

    Maybe there is another hacky solution by creating your own font

    No need to create own, just find the "good one" currently installed used in the screenshot and make it picked by browser.

    For example, if I inspect above example (I see green pictures) in WebTools I see that it is rendered with 'Segoe UI Emoji' (Windows 10, Chrome, you know) font, despite CSS told to use 'Lucida Grande' font (declared for 'body' in this pages CSS).

    Picture: image

    That is due that magic fallback chain for unsupported character ('Lucida' presumably lacks the character altogether).

    I know that other local font supporting that character is 'Segoe UI Symbol': it produces similar shape but is not coloured. Let's say I like that one better.

    So I can redeclare the 'Lucida Grande' font (that I know is assigned, even though it is not actually rendered for that character) to use different font for just that single character:

    @font-face {
      font-family: 'Lucida Grande';
      src: local('Segoe UI Symbol');
      unicode-range: U+1F47D;

    Picture: image

    extraterrestrial alien (U+1F47D)

    So if you replace 'Lucida Grande' with font that given page uses and 'Segoe UI Symbol' with "the better" font from your system (or elsewhere, but beware problems posting it), it should work for you as well… (…provided your system does not use some other non-font magic to display emoji).

    153 x 21 - 969B
    140 x 19 - 766B
  • image

    1185 x 123 - 28K
  • @myf

    Is "Segoe UI Symbol" not very good? At least a quarter of the emoji I come across don't work. Is there a more complete font to replace it with, and if so, what'd be the steps to make it work?

    I barely ever mess with fonts in general, and while I don't particularly care about emoji, I'd rather a quarter of them weren't borked.

    If it's as simple as installing a better font, might as well. If remapping is necessary and possible, I suppose that'd also be alright. Googling it, all I really see are extensions, and that seems a pretty terrible solution. I'm surprised that neither Windows or Chrome handles them all by default.
Sign In or Register to comment.