Skip to content

Commit

Permalink
Merge pull request #51 from davidmerfield/develop
Browse files Browse the repository at this point in the history
v0.2.4
  • Loading branch information
danielhaim1 authored Oct 29, 2019
2 parents 4ae6527 + 3d9a77e commit f62f175
Show file tree
Hide file tree
Showing 60 changed files with 1,758 additions and 2,207 deletions.
3 changes: 3 additions & 0 deletions .jshintrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"esversion": 6
}
81 changes: 45 additions & 36 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,24 +1,32 @@
# Typeset

**[Typeset](https://typeset.lllllllllllllllll.com/)** is an HTML pre-proces­sor for web ty­pog­ra­phy, giving 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.

Typeset.js is available as a plugin for [Grunt](https://github.com/mobinni/grunt-typeset) and [gulp](https://github.com/lucasconstantino/gulp-typeset).

[![Demo](http://i.imgur.com/adsiz94.gif)](https://typeset.lllllllllllllllll.com/)

**[Typeset](https://typeset.lllllllllllllllll.com/)** 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](https://typeset.lllllllllllllllll.com/). 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](http://i.imgur.com/vVGtD3V.png) and [without any CSS](http://i.imgur.com/ITM0bcG.png)!
------------

## Getting Started

```javascript
```js
npm install typeset
```

##### Usage
## Use

```javascript
```js
const typeset = require('typeset');
const html = '<p>"Hello," said the fox.</p>';
const output = typeset(html);
```

Then tweak [typeset.css](https://github.com/davidmerfield/Typeset/blob/master/demo/source/typeset.css) to match the metrics of your font and include it on your page.
Then tweak the CSS to match the metrics of your font and include it on your page.

```css
/* Small caps */
/*.small-caps {font-variant: small-cap/*s;}*/
/*.small-caps {font-variant: small-cap;}*/

/* Double quote (") marks */
.pull-double{margin-left:-.46em}
Expand All @@ -39,21 +47,24 @@ Then tweak [typeset.css](https://github.com/davidmerfield/Typeset/blob/master/de
.push-A {margin-right: 0.03em}
```

Typeset.js is available as a plugin for [Grunt](https://github.com/mobinni/grunt-typeset) and [gulp](https://github.com/lucasconstantino/gulp-typeset).

##### Options
## Options

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

```javascript
```js
const 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,
disable: ['hyphenate'], // array of features to disable
// string of a CSS selector to skip
ignore: '.skip, #anything, .which-matches',

// string of a CSS selector to only apply typeset,
only: '#only-typeset, .these-elements',

// array of features to disable
disable: ['hyphenate'],
};
```

##### Disableable features
### Disableable features
The following features may be disabled:

- `quotes`
Expand All @@ -64,7 +75,7 @@ The following features may be disabled:
- `hangingPunctuation`
- `spaces`

##### CLI Usage
### CLI Usage

```
$ npm install -g typeset
Expand All @@ -82,54 +93,52 @@ Options:
--disable, string of typeset feature(s) to disable, separated by commas
```

Examples:
## Examples:

Compile a file and print it to stdout:

```
```js
$ typeset-js inputFile.html
```

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

```
```js
$ typeset-js inputFile.html outputFile.html
```

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

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

Use the `--disable` option to disable typeset features:

```
```js
$ typeset-js inputFile.html outputFile.html --disable "hyphenate,ligatures"
```

CLI redirections:

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

##### License
## Need help?

If you don't find the answer to your problem in our docs, ask us for help.

This software is dedicated to the public domain and licensed under [CC0](https://github.com/davidmerfield/Typeset/blob/master/LICENSE).
## License

##### Building locally
This software is dedicated to the public domain and licensed under Creative Commons Zero.
See the [LICENSE](LICENSE) file for details.

Clone this repo then fetch its dependencies using `npm install`. You can then edit the code in `/src`.
## To Do:

##### To Do
* Develop a React, and Svelte plugins
* Develop a client-side plugin
* Add a build file
* Make this work on the client
* Incorporate features from [Normalize Opentype](http://kennethormandy.com/journal/normalize-opentype-css)?
* Remove recursion from eachTextNode.js
* Feature to [avoid widows](https://github.com/davidmerfield/Typeset/issues/34).
* Incorporate features from [Normalize Opentype](http://kennethormandy.com/journal/normalize-opentype-css)

##### Who uses this library
## Who uses Typeset?

* [**Blot**](https://blot.im/) - a blogging platform I made, uses this to typeset blog posts
* **You?** [Contact me](mailto:dmerfield@gmail.com) or submit a pull request to add it here!
* [**Blot**](https://blot.im/) - A blogging platform with no interface
* **You?** Submit a pull request to add it here!
2 changes: 1 addition & 1 deletion demo/source/typeset.css
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/* Small caps */
/*.small-caps {font-variant: small-cap/*s;}*/
/*.small-caps {font-variant: small-cap;}*/

/* Double quote (") marks */
.pull-double{margin-left:-.46em}
Expand Down
Loading

0 comments on commit f62f175

Please sign in to comment.