Info
The emoji image is rendered on your machine, so only emojis that are available on your operating system can be rendered.
The URL is updated every time you make a change, so you can share or save the URL and it will show the same view that you are currently seeing.
Options explained
Emoji: the emoji character to render. Since emojis consist of up to 4 characters and some operating systems and browser have difficulties with correctly reading emoji length, the input takes up to four characters.
Width: the target width of the emoji image. The result may differ due to scaling and cropping inconsistencies.
Rotate: amount of degrees to rotate the emoji.
Outline: draw an outline around the emoji. Since it currently uses a very simple method, it only really works with pixelated emojis, where 1 unit of outline equals the size of one pixel.
Outline Color: the color of the outline, if applicable.
Outline Mode: draws the outline inside or outside of the original bounds.
Pixelate: apply a pixelation effect to the emoji. The number determines the internal resolution, i.e. how many pixels get drawn for every given input pixel.
Background Mode: whether to fill the background with a solid color or keep it transparent. JPEG output supports solid background colors.
Background Color: the background color, if applicable.
File type: file type of the image. JPEG does not support transparent background, WEBP might not be available on every platform, PNG does not support the quality setting.
Quality: quality of the output image, 1 is highest, 0 is lowest.
Crop: when enabled, rows and columns of empty pixels are shaved off the edges of the output image.
Basic example
A single emoji is rendered using the BaseRenderer Class. Properties like dimensions, background image position etc are set discretely
Transformation & Crop
Two rotated emojis are rendered using the json attribute. The right emoji is smaller because `crop` is disabled for the second element. Also note how in the output markup both divs have received a new data-attribute.
The general styling is done via bootstrap classes
Pixelation
Each emoji is rendered with an increasing amount of pixelation, while the rotation of all emojis is set on the renderer instance.
Outlines
Outlines only work for pixelated emojis. The left image uses the default "outlineMode"-option "inside" to render the outline inside its original bounds while the right emoji uses "outside" and has larger dimensions.
Using Output Dimensions
Platform-specific emoji-implementations may have different aspect ratios for the same emoji. If you don't want to guess you can have the exact output dimensions set in the output CSS rule by using the "setDimensions"-option. This can be particularly useful in conjunction with the renderer's scale and pixelate options for compositions.
The border and shadow only illustrate the div's dimensions.
The "setDimensions" option comes at a slight performance hit, as the (cached) blob image has to be loaded once in code to acquire its dimensions.
Data-Attr API
In addition to using a complex json data-emoji-attribute, you can pass all renderer options via data-attributes. The attribute names correspond to the renderer options but must be passed in kebab case.
Both variants generate the same selector, although they're initialized through different APIs.
Adding Content
A CSSHelper-instance's deploy method can be called again when you have added content to your document that needs to be processed:
Disabling Cache
Compare the timing in the lower right corner to the timing of the "Pixelation" example above. Caching really improves the performance.
If you see no significant difference, please reload the page. Caching of course only kicks after the second page load.
Errors
Malformed JSON will result in a unicode replacement character being generated and the original content of the data-emoji attribute is replace with PARSE_ERROR. The original, defect JSON is placed in the data-original-emoji attribute.
Custom Selectors
If you don't want to or can't rely on the helper's built-in mechanism for creating the selectors and attributes, you can pass the emojis to render with custom properties and create the selectors accordingly.
Compositions
Rendering multiple nodes to create a composition of emojis may not be the most efficient way. To avoid this, you can pass a list of emojis to the ComposedCSSHelper class and render them onto a single image.
Composition Data-Attr API
You can also use the composition feature by utilizing data-attributes.