Giter VIP home page Giter VIP logo

prototypo's Introduction

Prototypo, Streamlining font creation

=====================================

Build Status PayPayl donate button

BEFORE ANYTHING !

Use git flow on this branch (reactify-and-cleanup) Add --no-ff to your merge options on this branch. If you merge a branch on reactify-and-cleanup with ff I'll be really sad and cry

Labeling convention:

  • Feature -> feat/name-of-feature
  • Fix -> fix/name-of-fix_issuenumber

Before installing Prototypo

In order to build Prototypo, you need to install the following software-packages on your system:

  • Git
  • node >= 4 with npm >= 3 or yarn

Installing Prototypo

Clone a copy of the main Prototypo git repository

$ git clone git://github.com/byte-foundry/prototypo.git && cd prototypo

Install build scripts and frontend libraries

$ yarn

Running Prototypo

$ yarn start

Roadmap to v1.0

  • possibility to modify text directly in the preview (#78) ……… ✓
  • a complete alphabet with alternates (some numbers, punctuation and accents are missing) ……… ✓
  • automatic spacing (#124)
  • generating binary font-files such as .otf, see the current workaround (#12) ……… ✓
  • personnal library to save and load different fonts (#125) ……… ✓
  • undo/redo history (#94) ……… ✓

Known issues

  • font export is broken in Safari (#111)

Converting an .svg font to other font formats

This operation currently requires either Fontforge or using a hosted service such as onlinefontconverter.

License

Files with a .js, .jsx or .json extension in this repository are licensed under MPLv2. All other files (including .css, .scss, .svg and .png files) are the property of Prototypo SAS and cannot be redistributed outside of a Github.com repository. Prototypo and its logo are registered trademarks of Prototypo SAS.

prototypo's People

Contributors

aldrian avatar franzpoize avatar hipsterbrown avatar kennethormandy avatar louisremi avatar martinbolot avatar mouvedia avatar yannickmathey avatar yorunohikage avatar yukulele avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

prototypo's Issues

README

I'd love to try this out, but there's no README with instructions about how to build and run it :)

Turn formula utils into filters

Point.on and Point.translate should be filters to.
This requires:

  • adapting "on" and "translate" so that a Point is built first if the params aren't already an instance
  • test

Features that need to be unit-tested

  • All constructors and instance methods
  • the behavior of segment.$render
  • the moveSegmentEnd that happens at the end of processSubcomponent
  • C+ / C- commands

Write formula Docs

Rules:

  • "replace" subcomponents shouldn't do a "from self[n] {{ 'start' }}" but rather a "from self[n-1] {{ 'end' }}"
  • "replace" subcomponents shouldn't do a "to self[n] {{ 'end' }}" but rather a "to self[n+1] {{ 'start' }}"
  • "replace" subcomponents should be listed in the order they are attached to the outline. Otherwise we can't spot a subcomponent being ignored because of the previous on
  • a subcomponent must reach its "to" coordinates (well, not necessarily)
  • a subcomponent cannot replace the M and Z of its parent component
  • you can't use "S" or "T" segment in an inverted component. The inversion mechanism isn't yet able to deal with it

Replace native sliders with custom ones

Les sliders natifs sont pratiques parce qu'ils marchent sans qu'on ai rien besoin de faire mais ils sont moches.
Il faut créer nos propres sliders à l'aide des directives Angular.
C'est une amélioration à ta portée Yannick, si tu es intéressé.

Display end-points and control-points coords on hover

We now have a "segment-endpoint" directive in "directives/endpoint.js" which creates individual blue squares for each segment's endpoint in the glyph.
It could be useful to display the position of the related endpoint when a blue square is hovered.

This is something Yannick could do too.

conflict between serifs & width (?)

When you add serifs on \A, sliders work but on mouseRelease it is getting weird
Same kind of issue with \f but it is seems to be the opposite behaviour (ok on release, weird while sliding)

Both of cases, it seems the combinaison width + serif is the the origin of this issue

serif width and curve

serif-bottom-right.txt

// row 3 : the first parameter should be:
// {{ serifWidth }}
// not:
// {{ serifWidth - serifHeight * serifCurve }}
// but it allows to make some "fleur de Lys" shape : )
// Should we keep this ? (in a experimental mode?)

Generate binary font files (.otf, .woff, .eot)

Generating binary font files such as .otf is hard! It's not like anything we've done so far. Here is what we know:

  • It should be possible to generate "svg opentype" fonts (firefox only) using the js files of this project: https://github.com/rocallahan/svg-opentype-workshop The only problem is that the CmapTable.js file looks incomplete, and it's required to generate a font without using an existing one that already has a complete cmap.
  • fontforge can be used as a command-line tool to generate .otf and other binary formats files from svg sources. The challenge is to compile it using emscripten in order to do that right in the browser. The command lines "API" (see http://fontforge.org/cliargs.html ) uses scripts that can be written either in python or in a specific language (see http://fontforge.org/scripting-tutorial.html ).
  • It should be relatively easy to generate ttx with cff outlines files by studying the documentation and some example files, see https://github.com/behdad/fonttools Hinting looks slightly more complex. But .ttx isn't very useful: it has been replaced by UFO, and .svg fonts can also be converted to .otf using fontforge.
  • There's a JS lib able to read outlines from OpenType fonts with TrueType outlines: https://github.com/nodebox/opentype.js There's also a cff branch that should soon add support for PostScript outlines (the only ones interesting to us). We contacted him via Twitter and he said font creation was on the roadmap. This looks like a very promising long-term solution and we should do what we can to help it happen.

Buy a domain name for the project

We need a domain name: one that is available, easy to remember and that would allow us to be at the top of the search results on Google.

Pourquoi on est obligé d'avoir une forme de référence ?

ou "Pourquoi on ne trace pas le glyphe uniquement à partir de valeurs de sliders ?".

  1. Parce que pour les glyphes qui ont plusieurs courbes complexes, comme "a", "g", "s", "B" c'est crucial d'avoir une référence (???)
  2. Parce qu'à terme on devra être capable d'importer des glyphes dans le logiciel pour les rendre paramètrable.

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.