Code Monkey home page Code Monkey logo

fontra's Introduction

Fontra

Fontra Icon

Fontra is an in-development browser-based font editor. It consists of two main parts:

  • Fontra client — runs in the browser, written in JavaScript
  • Fontra server — runs locally or on a remote machine, written in Python

Installing Fontra

Download and install Fontra Pak

Fontra Pak is a Fontra distribution for macOS and Windows. It is a self-contained Fontra server application, which allows you to view and edit fonts in the default browser. We don't have releases for it yet, but you can grab the latest nightly build from the topmost “Build Application” workflow, or, more conveniently, directly from fontra.xyz.

Fontra Pak should also work on Linux and other platforms, but you will have to build it from the sources.

Install from the source code

Requirements

  • Ensure you have Python >= 3.10 installed, preferably from python.org

  • Ensure you have Node.js >= 19 installed, preferably from nodejs.org

Setup

  • Check out the Fontra repository (the one you are reading this from), cd into the root of the repository

  • Create a Python venv in the root of the repo:

    python3.10 -m venv venv --prompt=fontra

    (Replace python3.10 with python3.11 if you have 3.11 instead.)

  • Activate venv:

    source venv/bin/activate

  • Install general dependencies:

    pip install --upgrade pip

    pip install -r requirements.txt

    pip install -e .

Testing

The following steps are needed if you want to run the automated tests and if you want to contribute:

  • Install dependencies to run the automated tests:

    pip install -r requirements-dev.txt

  • Install pre-commit to run formatters and linters:

    pre-commit install --install-hooks

  • To verify if everything is working correctly, run both test suites:

    pytest

    npm test

Running

  • Start the fontra server with a path to a folder containing fonts (.designspace, .ufo, .ttf or .otf), using the filesystem subcommand:

    fontra --launch filesystem /path/to/a/folder

  • The default browser will then navigate to:

    http://localhost:8000/

  • To use Fontra with .rcjk data on disk, or to connect to a remote rcjk server, install the fontra-rcjk plugin package. Then you can start it with a robocjk server hostname, using the rcjk subcommand provided by the fontra-rcjk plugin:

    fontra --launch rcjk some-robocjk-server.some-domain.com

Roadmap

The following list of features is not complete, but gives you a rough idea of where we are now, and where we are headed. A green checkmark means: “This feature has been implemented”.

Input / Output

  • Read .designspace ✅
  • Write .designspace ✅
  • Respond to external .designspace changes (automatic reload)
  • Read .ufo ✅
  • Write .ufo ✅
  • Respond to external .ufo changes (automatic reload) ✅
  • Read .ttf + variable .ttf ✅
  • Read .otf + variable .otf ✅
  • Write .ttf + variable .ttf (For “hot fixes”. Currently not planned, will still require export step.)
  • Write .otf + variable .otf (Ditto.)
  • Respond to external .ttf and .otf changes (automatic reload)
  • Read .glyphs and .glyphspackage ✅ (Via fontra-glyphs)
  • Write .glyphs and .glyphspackage

Text viewing / editing

  • Basic live text entry, including /glyphname notation ✅
  • Multi-line text ✅
  • Basic glyph selection (pick glyph from list) ✅
  • Basic designspace navigation (via axis sliders) ✅
  • Show live interpolation ✅
  • Hand tool for scrolling ✅
  • Scroll with gestures ✅
  • Zoom with gestures ✅
  • Zoom with short-cuts ✅
  • Advanced character / glyph search
  • Display kerning
  • Apply proper text shaping
  • Full screen mode ✅
  • Right-to-left mode
  • Vertical top-to-bottom mode
  • Enter “edit mode” for glyph by double-clicking on a glyph in the text ✅

Glyph editing

  • Basic outline editing (move points) ✅
  • Basic pen tool (draw points) ✅
  • Edit (variable) component parameters ✅
  • Decompose (variable) component ✅
  • First-class support for quadratic curves ✅
  • Multi-level undo/redo, per glyph ✅
  • Interactive sidebearing editing
  • Numeric sidebearing editing ✅
  • Numeric advance width editing ✅
  • Pen tool for quadratic curves ✅ (experimental)
  • Decent outline editing (adding/removing points, removing contours) ✅ (with caveats)
  • Select segments ✅
  • Advanced outline editing: edit segments
  • Connecting open paths ✅
  • Show point coordinates and component origins numerically ✅
  • Knife tool
  • Shape tool ✅
  • Measure tool ✅
  • Copy / paste ✅
  • Create new glyphs ✅
  • Delete glyphs ✅
  • Add / remove (variable) components ✅
  • Anchors ✅
  • Guidelines
  • View background layers
  • Edit local variation axes ✅
  • Edit local sources/layers ✅
  • Built-in support for Non-Linear Interpolation
  • Remove overlap and other path operators
  • Transformation panel ✅

Font-level viewing / editing

  • Create new font project ✅ (Fontra Pak)
  • Cell-based font overview
  • List-based font overview
  • Edit font meta data (“font info”) ✅
  • Edit kerning
  • Edit OpenType features
  • Edit variation axes ✅
  • Visualize and edit variation axis mapping (avar) ✅

Multiple windows

  • Propagate changes across multiple windows in real time ✅
  • Browser URL encodes most view settings ✅

Deployment

  • Basic standalone desktop application for macOS and Windows ✅ (Via Fontra Pak)
  • Basic multi-user server deployment with database storage ✅ (Via fontra-rcjk, django-robo-cjk, behind NGINX)
  • Research GitHub REST API: can Fontra be a GitHub gateway in a practical way?
  • Research database solutions for server-based font storage
  • Desktop app with integrated browser and auto-update feature (made with Electron or similar)

Scripting

  • A Python scripting library that talks directly to the Fontra server
  • JS scripting for in-browser automation
  • Python scripting for in-browser automation via WASM/PyOdide
  • Add various plug-in APIs, for example:
    • Visualization layer plug-ins for the glyph editor
    • Tool plug-ins

Export

  • FontMake/Fontations integration
  • Incremental compilation using Fontations
  • Experimental glyf1 export ✅ (Via fontra-compile)

Collaborative features

  • Visualizing the selection of others
  • Add review notes / comments
  • Suggested edits

Code structure

  • Client/server architecture (JavaScript/Python) ✅
  • Local or (networked) remote server ✅
  • Client/server communication via JSON objects over a WebSocket ✅
  • Highly modular:
    • Pluggable client views ✅
    • Pluggable read/write storage backends ✅
    • Client-agnostic and storage-agnostic server centerpiece ✅
  • Asynchronous programming model using async/await ✅

Future possibilities

  • Serverless Fontra
  • Peer-to-peer collaboration

fontra's People

Contributors

justvanrossum avatar fatih-erikli avatar ollimeier avatar dependabot[bot] avatar fabiocaccamo avatar nedkamburov avatar elevchyt avatar herlanww avatar navv-1 avatar madig avatar davelab6 avatar gaetanbaehr avatar hwoongkang avatar blackfoundry avatar roeln avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.