Giter Site home page Giter Site logo

chrisemoulton / typeset Goto Github PK

View Code? Open in Web Editor NEW

This project forked from davidmerfield/typeset

0.0 1.0 0.0 1.16 MB

An html pre-proces­sor for web ty­pog­ra­phy

License: Creative Commons Zero v1.0 Universal

JavaScript 87.98% CSS 5.34% HTML 6.68%

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.

Typeset.js is available as a plugin for grunt and gulp.

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 [options] [<infile> [<outfile>]]

Options:

  -h, --help      output usage information
  -V, --version   output the version number
  -i, --ignore    string of CSS selector(s) to ignore
  -O, --only      string of CSS selector(s) to exclusively apply typeset to

Examples:

Compile a file and print it to stdout:

$ typeset-js inputFile.html

To create an output file, just add a second argument:

$ typeset-js inputFile.html outputFile.html

Use the --ignore option to ignore specific CSS selectors:

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

CLI redirections:

$ cat index.html | typeset-js > outputFile.html
License

This software is dedicated to the public domain and licensed under CC0.

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
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 gabrielperales avatar jonathanzong avatar lucasconstantino avatar

Watchers

James Cloos 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.