Hook `&…`

Within a line of text, a hook is a word or phrase which is marked for other technology like Cascading Stylesheets and JavaScript to style, replace or enhance it in some way. Hooks do not carry any special meaning or styling on their own in Aneamal.

Be frugal with hooks. Dedicated Aneamal markup is usually preferable. A hook is a last resort for demands that have no other solution in Aneamal.

How to

Place an ampersand & in front of a word to turn it into a hook. You can also prepend the ampersand to a string of words to make that a hook. You can create a hook without visible text in the webpage by wrapping it in curly brackets &{…}.

In HTML

A hook is translated to a span element with a class attribute when Aneamal is converted to HTML. The class attribute contains two classnames: the generic _hook class and a classname that is derived from the marked word or phrase. See the examples below.

Automatic Translation of a hook to an HTML class

Normalization step:
1. remove soft hyphens (U+00AD)
2. replace no-break spaces (U+00A0) by spaces (U+0020)
3. convert alphabetic characters to lowercase
Main step:
1. leave ASCII letters and digits untouched
2. collapse all other ASCII bytes to single hyphens (U+002D)
3. encode non-ASCII bytes as lowercase hexadecimal number
Remove leading and trailing hyphens.

Examples

Branding

In the first example, a product name is turned into a hook to apply a special style associated with the brand.

&Aneamal is another easy markup language.

Aneamal is another easy markup language.

The Aneamal Translator converts the text to the following HTML code.

<span class='_hook aneamal'>Aneamal</span> is another easy markup language.

It is styled with the CSS code below:

main .aneamal {
	font-variant: small-caps;
}

Dynamic content

The second example uses a hook to insert and update the time within a sentence.

It’s &`current time`.

It’s current time.

Here is the generated HTML code, followed by the JavaScript code used to insert and update the time:

It’s <span class='_hook current-time'>current time</span>.

document.addEventListener('DOMContentLoaded', function() {
	const hooks = document.querySelectorAll('.current-time');
	setInterval(function () {
		const time = new Date().toLocaleTimeString();
		hooks.forEach(hook => {
			hook.innerHTML = time;
		});
	}, 1000);
});

Missing emoji (1)

You can simply paste emojis that are available in Unicode into your text file whenever you need them. However, a hook can help if you need an aardvark, pangolin or leech emoji that Unicode lacks or in case you require a particular emoji design:

The &fox seemed perplexed, and very curious.

The fox seemed perplexed, and very curious.

The Aneamal Translator generates the following HTML code here:

The <span class='_hook fox'>fox</span> seemed perplexed, and very curious.

CSS is applied to display the doodled fox in place of the hook. The properties display, a zero height and overflow are used to hide the span element’s content box visually while a background-image is shown within the element’s top padding instead. The values for the width and padding-top properties are chosen to match the aspect ratio of the image while the background-size property resizes it to cover the given dimensions. The speak property tells screen readers to read the word fox aloud despite being invisible:

span.fox {
	display: inline-block;
	height: 0;
	overflow: hidden;
	background-image: url(/stuff/fox.svg);
	background-size: cover;
	width: 1.5em;
	padding-top: 1em;
	speak: always;
}

Missing emoji (2)

Alternatively, JavaScript can be used to hook an emoji image into the text. Here is an example:

Karma, karma, karma, karma, karma &chameleon

Karma, karma, karma, karma, karma chameleon

The Aneamal Translator’s HTML output is this:

Karma, karma, karma, karma, karma <span class='_hook chameleon'>chameleon</span>

JavaScript code is used to replace the word chameleon with an HTML img element wherever the hook occurs:

document.addEventListener('DOMContentLoaded', function() {
	document.querySelectorAll('.chameleon').forEach(hook => {
		hook.innerHTML = "<img src='/stuff/chameleon.svg' alt='chameleon' style='height: 1cap; vertical-align: text-bottom'>";
	});
});

The JavaScript solution is arguably less hacky than the CSS solution. It requires running JavaScript though.

Hook &…