{emoji} · PAD tags

Syntax

{emoji 'rocket'}
{emoji ':tada:', label='Party!'}

Parameters

shortcode: The shortcode, with or without colons, in any case - +1, heart, :white_check_mark:.

Options

label: The name a screen reader says, default the emoji's own name.

Description

{emoji 'rocket'} writes <span class="pad-emoji" role="img" aria-label="rocket"> around the emoji, so a screen reader names it instead of reading out a code point - and label= gives it another name to say. The shortcodes are the common ones of GitHub and Slack, a few hundred with their aliases: faces, hands, people at work, animals, food, travel, objects and symbols, keycaps. They may be written with or without the colons, in any case.

An emoji that also has a plain text form - a heart, a sun, a check mark - carries the variation selector that asks for the colour picture, so it does not show as a black glyph in one font and a colour one in another.

An unknown shortcode is a strict error that names the nearest one that exists - did you mean ':rocket:'?. The emoji pipe does the replacing for a whole text: {$comment | emoji} turns every shortcode it knows into its emoji and leaves the rest, and a time like 10:30:00, as written.

Examples

A reaction bar

Each emoji from its shortcode - with or without colons - in a span a screen reader names.

Templateexamples/emoji/1-reactions.pad

<p>
  {reactions}
    <span style="display:inline-block;padding:3px 10px;margin:2px;border:1px solid rgba(128,128,128,.35);border-radius:999px">{emoji $code} {$count}</span>
  {/reactions}
</p>

PHPexamples/emoji/1-reactions.php

<?php

  $reactions = [
    [ 'code' => '+1',      'count' => 24 ],
    [ 'code' => ':tada:',  'count' => 17 ],
    [ 'code' => 'heart',   'count' => 9  ],
    [ 'code' => 'Rocket',  'count' => 12 ],
    [ 'code' => 'eyes',    'count' => 3  ] ];

?>

Resultopen alone

👍 24 🎉 17 ❤️ 9 🚀 12 👀 3

Another name to say

label= replaces the name a screen reader says; the pipe form turns the shortcodes in a text into emoji.

Templateexamples/emoji/2-label.pad

<p>Status: {emoji 'white_check_mark', label='Build passed'} {emoji 'warning', label='Two warnings'}</p>
{set $message = 'Shipped :rocket: at 10:30:00 - thanks all :clap:'}
<p>{$message | emoji}</p>