Git Product home page Git Product logo

typeset's Introduction

Demo

Typeset is an html pre-proces­sor for web ty­pog­ra­phy. It uses no client-side JavaScript but gives you hang­ing punc­tu­a­tion, soft hy­phen in­ser­tion, op­ti­cal mar­gin out­dents, small-caps con­ver­sion and punctuation substitution. See the results on the demo. The library is idempotent and runs on the server using Node – I'll adapt it to work on the client soon. The processed HTML & CSS renders correctly in IE5 and without any CSS!

npm install typeset
Usage
var typeset = require('typeset');
var html = '<p>"Hello," said the fox.</p>';
var output = typeset(html);

Then tweak typeset.css to match the metrics of your font and include it on your page.

Options

You can pass an options object to influence how your HTML is typeset:

var options = {
  ignore: '.skip, #anything, .which-matches', // string of a CSS selector to skip
  only: '#only-typeset, .these-elements'    // string of a CSS selector to only apply typeset
};
CLI Usage
$ npm install -g typeset
Usage: typeset-js <entry file> [options]

Options:

  -h, --help      output usage information
  -V, --version   output the version number
  -o, --outfile   write Typeset output to this file (if unspecified, Typeset will print to stdout)
  -i, --ignore    string of CSS selector(s) to ignore
  -O, --only      string of CSS selector(s) to exclusively apply typeset to

Example:

$ typeset-js inputFile.html -o outputFile.html --ignore ".some-class, h3"
Building locally

Clone this repo then fetch its dependencies using npm install. You can then edit the code in /src.

To Do
  • Add a build file
  • Make this work on the client
  • Incorporate features from Normalize Opentype?
  • Remove recursion from eachTextNode.js
  • Consolidate functions which use eachTextNode.js
Who uses this library
  • Blot - a blogging platform I made, uses this to typeset blog posts
  • You? Contact me or submit a pull request to add it here!

typeset's People

Contributors

davidmerfield avatar faheempatel avatar jonathanzong avatar

Watchers

Fred avatar  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.