danielgamage/font-dashboard

An open-source GUI for text layout on the web.

Font Dashboard

An open-source GUI for text layout on the web.

Features

Drag & Drop Font File Loading

Use the font file property uploader or drag a font onto the text box you wish to apply the font to. This loads a buffer, which means there's no cached file to worry about if you refresh the page.

Usage of Any Font Installed Locally

Or, if you have a font already installed on your system, simply type the font family name in the font-face field. This applies the property to the CSS font-face property.

Multi-Column Text Layouts

Use CSS Columned Layout~~~

Responsive Interface

Works on phones if you want... for whatever reason.

Variable Font Testing

Automatically adds font variation axes to the interface with min and max values.

Opentype Feature Testing

• language localization
• supports everything but cv01-cv99

Rendering Methods

Supports subpixel, grayscale, and aliased rendering methods (depending on browser).

Select and Edit Multiple Textfields at Once

You can box-select any textbox, using shift and alt keys as additive and subtractive modifiers, and edit properties of those textboxes in parallel.

Credits

Inspiration from http://typeshiftapp.com/ for making web editors beautiful, http://www.impallari.com/testing/ for making web testing an essential part of font development.

WIP

There's a lot of updating that needs to be done under the hood, as well as on the front-end, but if you're curious to try, you can test at https://danielgamage.github.io/font-dashboard/

font-dashboard's Issues

get min/max of weight / width from font

from gvar table is it?

indicate differing values of multiple textboxes

when multiple textboxes are selected and they have different values for a particular property, the corresponding input should have an indicator to show that not all values are equal

preserve state between visits

store state in key value local storage (on unload)

make textboxes draggable

allow selection of added font faces from dropdown

fix margins not collapsing between textboxes

unable to drag font onto unselected textbox

floatable objects

only show available opentype features

same as language support

parse fvar min/max and axis names

from opentype.js

redesign text setter

editing text exits fullscreen

cursor getting shifted to front when text-transform: uppercase

more generally the issue is that the css applies the text transformation and affects the value of the input

console error on some variations fonts

Allow deletion by `del` key

for selected (but probably not currently editing) textboxes

more contextual clues for vertical input

lang attribute setting

Only show "added" if fonts are added to the doc

box selection / select all button

pasting in textbox puts cursor at front

can't scrub numeric inputs on mobile

add blur property

need better mobile styles

1 click for select. 2 clicks for edit.

Allow transfer of font files over network

WebRTC to transfer file for use on multiple devices?

useful for testing on mobile.