Component Reference

Using the components

To use these components, you need to:

• ensure your Markdown file uses the .mdx extension
• import the component(s) you want to use below the frontmatter section but before any other page content, using a declaration such as:

import Character from '/src/components/Character.astro';

If your component content doesn’t show up on the rendered page, check it has the .mdx extension and that you’ve imported the component correctly.

Additional examples of using these components can be found in Component Coredata Examples.

Currently-recommended components

Character component

Required import

import Character from '/src/components/Character.astro';

Syntax

<Character usv="XXXX"|char="a" [options="usv,char,name"]/>

Note: Either usv or char must be provided.

Property	Description
usv	The USV of the character to display
char	A literal character
options	A comma-separated list of options to display. Options are usv, char, and name. The default is all three.

Inline examples

This example uses the default options, where all three elements appear.

<Character usv="0634"/>

Result: U+0634 ش ARABIC LETTER SHEEN

This example uses just usv and char options:

<Character usv="0634" options="usv,char"/>

Result: U+0634 ش

List example

• U+0020 SPACE
• U+0635 ص ARABIC LETTER SAD

Combining marks

Combining marks are automatically displayed with a dotted circle to indicate their combining nature.

<Character usv="0301"/>

Result: U+0301 ◌́ COMBINING ACUTE ACCENT

---

Components in development

Caution

These components are prototypes for possible future use: their specification is not yet agreed. You are welcome to try them out and give feedback, but be aware that they will likely change.

CharacterTable component

Required import

import CharacterTable from '/src/components/CharacterTable.astro';

Syntax

<CharacterTable startUsv="XXXX" endUsv="XXXX" [caption="..."]/>

Property	Description
startUsv	The Unicode scalar value of the first character to display
endUsv	The Unicode scalar value of the last character to display
caption	The caption to display below the table

Examples

Source

<CharacterTable
  startUsv = "0627"
  endUsv   = "0632"
  caption  = "Arabic characters 0627-0632"
/>

Result

USV	Char	Unicode Character Name
U+0627	ا	ARABIC LETTER ALEF
U+0628	ب	ARABIC LETTER BEH
U+0629	ة	ARABIC LETTER TEH MARBUTA
U+062A	ت	ARABIC LETTER TEH
U+062B	ث	ARABIC LETTER THEH
U+062C	ج	ARABIC LETTER JEEM
U+062D	ح	ARABIC LETTER HAH
U+062E	خ	ARABIC LETTER KHAH
U+062F	د	ARABIC LETTER DAL
U+0630	ذ	ARABIC LETTER THAL
U+0631	ر	ARABIC LETTER REH
U+0632	ز	ARABIC LETTER ZAIN

Arabic characters 0627-0632

ScriptTable component

Required import

import ScriptTable from '/src/components/ScriptTable.astro';

Syntax

<ScriptTable
    [filter="key=value,key=value,..."]
    [order="expression"]
    [caption="..."]
/>

Property	Description
filter	A comma-separated list of key=value pairs to filter the scripts. Possible keys are script_reordering and script_direction. Possible values for script_reordering are yes and no. Possible values for script_direction are ltr, rtl, ttb, and btt. Multiple values for a key can be separated by `
order	An optional SQL ORDER BY clause to sort the results. Possible fields are script_name, script_code, script_type, script_family, script_direction, and script_reordering.
caption	An optional caption to display below the table.

Examples

Source

<ScriptTable
  filter  = "script_reordering=yes"
  order   = "script_family"
  caption = "Scripts with reordering"
/>

Result

Script Code	Script Name	Script Type	Script Family
Lepc	Lepcha (Róng)	abugida	Central Asian
Hmng	Pahawh Hmong	alphabet	East Asian
Toto	Toto	alphabet	Indic
Beng	Bengali (Bangla)	abugida	Indic
Brah	Brahmi	abugida	Indic
Deva	Devanagari (Nagari)	abugida	Indic
Gujr	Gujarati	abugida	Indic
Guru	Gurmukhi	abugida	Indic
Kthi	Kaithi	abugida	Indic
Mlym	Malayalam	abugida	Indic
Mtei	Meitei Mayek (Meithei, Meetei)	abugida	Indic
Tutg	Tulu-Tigalari	abugida	Indic
Shrd	Sharada, Śāradā	abugida	Indic
Ranj	Ranjana	abugida	Indic
Newa	Newa, Newar, Newari, Nepāla lipi	abugida	Indic
Sinh	Sinhala	abugida	Indic
Taml	Tamil	abugida	Indic
Sind	Khudawadi, Sindhi	abugida	Indic
Dogr	Dogra	abugida	Indic
Qa74	Bhujinmol	abugida	Indic
Bali	Balinese	abugida	Insular Southeast Asian
Sund	Sundanese	abugida	Insular Southeast Asian
Maka	Makasar	abugida	Insular Southeast Asian
Khmr	Khmer	abugida	Mainland Southeast Asian
Laoo	Lao	abugida	Mainland Southeast Asian
Mymr	Myanmar (Burmese)	abugida	Mainland Southeast Asian
Talu	New Tai Lue	abugida	Mainland Southeast Asian
Tavt	Tai Viet	abugida	Mainland Southeast Asian
Thai	Thai	abugida	Mainland Southeast Asian

Scripts with reordering

Source

<ScriptTable
  filter  = "script_type=abjad"
  order   = "script_name"
  caption = "Abjad scripts"
/>

Result

Script Code	Script Name	Script Type	Script Family
Arab	Arabic	abjad	Middle Eastern
Aran	Arabic (Nastaliq variant)	abjad	Middle Eastern
Phlv	Book Pahlavi	abjad	Middle Eastern
Chrs	Chorasmian	abjad	Middle Eastern
Elym	Elymaic	abjad	Middle Eastern
Hatr	Hatran	abjad	Middle Eastern
Hebr	Hebrew	abjad	Middle Eastern
Armi	Imperial Aramaic	abjad	Middle Eastern
Phli	Inscriptional Pahlavi	abjad	Middle Eastern
Prti	Inscriptional Parthian	abjad	Middle Eastern
Qa60	Khatt-i Baburi	abjad	Middle Eastern
Mani	Manichaean	abjad	Middle Eastern
Mult	Multani	abjad	Indic
Nbat	Nabataean	abjad	Middle Eastern
Narb	Old North Arabian (Ancient North Arabian)	abjad	Middle Eastern
Sogo	Old Sogdian	abjad	Middle Eastern
Sarb	Old South Arabian	abjad	Middle Eastern
Ougr	Old Uyghur	abjad	Central Asian
Palm	Palmyrene	abjad	Middle Eastern
Phnx	Phoenician	abjad	Middle Eastern
Phlp	Psalter Pahlavi	abjad	Middle Eastern
Samr	Samaritan	abjad	Middle Eastern
Sogd	Sogdian	abjad	Middle Eastern
Syrc	Syriac	abjad	Middle Eastern
Syrn	Syriac (Eastern variant)	abjad	Middle Eastern
Syre	Syriac (Estrangelo variant)	abjad	Middle Eastern
Syrj	Syriac (Western variant)	abjad	Middle Eastern

Abjad scripts

DataTable component

Required import

import DataTable from '/src/components/DataTable.astro';

Syntax

<DataTable
  table    = "table_name"
  fields   = "field1[=Label1], field2[=Label2], ..."
  [filter  = "condition"]
  [order   = "field1 ASC|DESC, field2 ASC|DESC, ... "]
  [caption = "Caption text"]
/>

Property	Description
table	The name of the table to query. Possible values are characters, scripts, and blocks.
fields	A comma-separated list of fields to display. Each field can optionally be followed by =Label to specify a custom column header.
filter	An optional SQL WHERE clause to filter the results.
order	An optional SQL ORDER BY clause to sort the results.
caption	An optional caption to display below the table.

Example

Source

<DataTable
  table   = "characters"
  fields  = "character_usv=USV, character_name=Character Name"
  filter  = "character_category = 'Lm' AND character_unicodeVersion = '3.0'"
  order   = "character_usv ASC"
  caption = "List of Modifier Letters (Lm) added in Unicode 3.0"
/>

Result

USV	Character Name
02EC	MODIFIER LETTER VOICING
02EE	MODIFIER LETTER DOUBLE APOSTROPHE
17D7	KHMER SIGN LEK TOO
1843	MONGOLIAN LETTER TODO LONG VOWEL SIGN
A015	YI SYLLABLE WU

List of Modifier Letters (Lm) added in Unicode 3.0