Unicode Range helper tool

zachleat commented 7 years ago

Use opentype.js to create a tool that automates unicode-range values.

Something similar to: https://opentype.js.org/glyph-inspector.html

Shows each glyph and has every glyph selected. Live updates a preview of the @font-face block with new unicode-range value as the user deselects glyphs from the list that they want to be excluded from the unicode-range.

Some overlap with http://kourge.net/projects/regexp-unicode-block maybe?

Thought of this idea after seeing @jakearchibald’s tweets and blog posts this week: https://twitter.com/jaffathecake/status/860550984233353216

zachleat commented 7 years ago

Similarly, allows you to modify the unicode-range (input your existing unicode-range value) and the selections will be updated to reflect the value.

Include a checkbox to Show only selected Glyphs

For example: http://fonts.googleapis.com/css?family=Raleway:400

resolves to:

/* latin-ext */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: local('Raleway'), local('Raleway-Regular'), url(http://fonts.gstatic.com/s/raleway/v11/YZaO6llzOP57DpTBv2GnyFKPGs1ZzpMvnHX-7fPOuAc.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: local('Raleway'), local('Raleway-Regular'), url(http://fonts.gstatic.com/s/raleway/v11/QAUlVt1jXOgQavlW5wEfxQLUuEpTyoUstqEm5AMlJo4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

zachleat commented 5 years ago

Related https://codepen.io/elifitch/pen/Ljqway by @elifitch

zachleat commented 9 months ago

https://www.zachleat.com/web/uniclode/ and https://www.zachleat.com/web/unicode-range-interchange/ do this.

zachleat / idea-book

Unicode Range helper tool #2