The words Under construction in black text on a yellow background with diagonal black stipes surrounding it
I'm in the process of moving my site. It's still a work in progress. Please excuse the mess and broken links.

All Unicode Characters On One Page

TODO: Pull subtitle into page object

Notes

When you're ready, click the button and the page will load the full set.

Notes

  • What renderers is dependent on the fonts on your machine

  • I've got large swatches where nothing renders. Not sure if that's font related or if stuff haven't been defined there yet

  • These are all characters from 0x21 to 0x1eeff

  • Characters 0x00 to 0x20 are invisible spaces and control characters. I didn't include them

  • I stopped at 0x1eeff since that's the last one referenced in the W3C Redommendation

css_start_default_section css_end_default_section script_start_default_section script_end_default_section

Debugging Stuff

I'm moving stuff around right now. All this below is helping me figure out where to put stuff

        -- title

All Unicode Characters On One Page

None of the Unicode character sites I've seen
show them all on a single page. That's understandable. 
There's 126,686 of them. But, I still wanted it. 

-- notes
-- title: Notes

- Fair warning: the first time you generate
the page it can take several seconds and tends to 
bog down and occasionally crash the page. I usually
get a "Page Unresponsive" warning, but clicking
"Wait" does let it finish.

- There will likely be a fair number of characters 
that don't show up. That' all based on the fonts 
available on your machine. 

- Clicking on a character copies the hex value for
it to your copy/pasteboard and adds it to the list
in the textarea below

-- html

<textarea id="copyArea" rows="5", cols="42"></textarea>



-- p

When you're ready, click the button and the 
page will load the full set.

-- html

<button id="generateButton">Generate Characters</button>

<div id="backgroundDiv"><div>

-- notes
-- title: Notes

- What renderers is dependent on the 
fonts on your machine

- I've got large swatches where nothing
renders. Not sure if that's font related
or if stuff haven't been defined there yet

- These are all characters from 0x21 to
0x1eeff

- Characters 0x00 to 0x20 are invisible spaces 
and control characters. I didn't include them

- I stopped at 0x1eeff since that's the last
one referenced in the 
<<link|W3C Redommendation|https://www.w3.org/TR/xml-entity-names/1EE.html>>


-- css/

#backgroundDiv {
  margin-top 1.7rem;
  display: flex;
  flex-wrap: wrap;
}

.char {
  width: 4ch;
  text-align: center;
  border: 1px solid black;
}

-- /css


-- script/

const generate = () => {
  generateButton.innerHTML = "Loading"
  let outputString = ""
  for (let c = 33; c <= 126686; c ++ ) {
    const unicodeCode = `#x${c.toString(16)};`
    outputString += `<span class="char" title="${unicodeCode}" data-code="&amp;${unicodeCode}">&${unicodeCode}</span> ` 
  }
  backgroundDiv.innerHTML = outputString
  generateButton.innerHTML = "Done."
}

const copyCharacter = async (event) => {
  try {
    await navigator.clipboard.writeText(
      event.srcElement.dataset.code
    )
  } catch (err) {
    console.error("Could not copy to clipboard")
  }

  copyArea.value = copyArea.value + event.srcElement.dataset.code + " "
}


document.addEventListener("DOMContentLoaded", () => {
  generateButton.addEventListener("click", generate)
  backgroundDiv.addEventListener("click", copyCharacter)
})

-- /script


-- categories
-- Design
-- WebDev 
-- ASCII

-- metadata
-- date: 2023-08-09 14:36:06
-- id: 2tl8arpo
-- site: aws
-- type: post
-- status: published