Really Useful Javascript

by Dale Stubbart

Expressive Websites


To use emoji codes on your website, write the emoji code e.g. :\grin: :grin:. Call x_emoji_init() in the <head> of your html and x_emoji() right before <body>. To spell out the emoji code, follow the leading : by \. You can pass a style for the emoji codes; e.g. x_emoji('font-size:1.5em;font-weight:bold;'). To test all the emoji codes use x_emoji('font-size:1.5em;font-weight:bold;','test').
x_emoji_init() initializes two arrays &n-; x_emoji_color_names and x_emoji_color_codes. x_emoji_color_names=['base', 'face', 'hand', 'heart', 'monkey','monk', 'cat', 'person','weather','red', 'purple','blue', 'yellow','pink', 'green', 'gray', 'black','brown','orange','white'];. base is the base color you&';re using for text or something a little brighter. It defaults to black. Various emojis use different colors, e.g. all emoji faces use the face color. You can override the codes for these color by replacing the corresponding value with a 6 digit html/css color code (no #). Or you can override all the colors with one color, by passing it in the style &n-; x_emoji(style).
x_emoji provides 250 of the most popular emoji codes. However, these are 250 of the most popular emoji codes used on twitter and so may not be ones you&';re using on your website. Three arrays are created in x_emoji_init which you can use to override or add your own emoji codes &n-; x_emoji_code_extra, x_emoji_unicode_extra, and x_emoji_color_extra. Just load these arrays with your codes, unicode replacements, and their corresponding color names in x_emoji_color_codes.
x_emoji_init also provides the variable x_emoji_limit. This defaults to the number of predefined (250) emoji codes plus those you load into x_emoji_code_extra. x_emoji runs very quickly, but if you&';re only using emoji in the top part of the predefined emoji, you can set this limit to something smaller to make it run even more quickly.


To use accented characters on your website such as &e'; and &e`;, write them as entities and call x_accent() before </body>. These entities have the format & followed by the letter to be accented, followed by the accent mark, followed by ;. Accent marks are ' acute (´), ` grave (`), , [comma] cedilla (¸), ^ circumflex (ˆ), .. umlaut/diaresis (¨), _ macron (¯), o ring (˚), and c ogonek (˛), u breve (˘), v caron (ˇ), . dot (˙), - stroke (&strok;) (the results are in parentheses). All accents are written above the letter except cedilla and ogon which are written under the letter, and stroke which runs through the letter. &e'; results in &e';. Not all combinations of letters (upper or lower case) and accent marks are valid. To see which ones are valid, run x_accent('test') and see W3 Schools HTML Entities and following chapters. Alternatively, run x_accent('test','here') to write test results here rather than bottom of page. To spell out the x_accent entity, split it up with spans. E.g. <span>&</span><span>e';</span>.