Character Viewer

An interactive character/glyph explorer.

<fontdue-character-viewer
  collection-slug="ibm-plex"
></fontdue-character-viewer>

import CharacterViewer from "fontdue-js/CharacterViewer";

<CharacterViewer collectionSlug="ibm-plex" />

import CharacterViewer, { loadCharacterViewerQuery } from "fontdue-js/CharacterViewer";

const characters = await loadCharacterViewerQuery({ collectionSlug: "ibm-plex" });

<CharacterViewer preloadedQuery={characters} />

Collapsing the grid

A large glyph set makes for a long grid, and everything after the viewer ends up far down the page. With collapse set, the viewer shows only part of the grid, with a Load more button underneath that reveals every character. Without a value, collapse shows just the first group from the collection’s Characters tab, so the grid is exactly as tall as that group. Given a height – a number of pixels, or any CSS length such as 40vh – it cuts the grid off at that height instead and fades out the last visible rows.¹¹The button only appears when there is something left to show: a collection with a single group, or a grid shorter than the height you set, renders in full without one.

<fontdue-character-viewer
  collection-slug="ibm-plex"
  collapse
></fontdue-character-viewer>

import CharacterViewer from "fontdue-js/CharacterViewer";

<CharacterViewer collectionSlug="ibm-plex" collapse />

Once expanded, the viewer stays expanded – there’s no button to collapse it again. Use load-more-label (loadMoreLabel in React) to change the button’s text – Show all characters, for example. The button takes its colour from the --character_viewer_load_more_color CSS variable, which falls back to the secondary text colour.

Properties