Giter VIP home page Giter VIP logo

normalize-opentype.css's Introduction

Note You might also like my more recent take on this project, Utility OpenType: CSS utility classes for advanced typographic features.


Normalize-OpenType.css wordmark


Normalize-OpenType.css

Adds OpenType features—ligatures, kerning, and more—to Normalize.css.

Read the blog post: Introducing Normalize-OpenType.css

Get the latest version of the CSS file

Or use

npm install normalize-opentype.css

Ligatures

First, normalize basic ligatures across browsers, and then get fancier, discretionary ligatures on <h1>, <h2>, and <h3>s.

An example of basic and discretionary ligatures.

Numerals

Different situations require different numerals, depending on the context. Normalize-OpenType.css takes care of this for you, so you don’t need to know what combination of Proportional, Lining, Tabular, and Old-Style numerals you need to use.

An example of old-style, proportional numerals.

An example of tabular, lining numerals.

Small Capitals

Regular capitals draw a lot of attention in body copy. With Normalize-OpenType.css, anything wrapped in <abbr> will use small capitals instead. This works especially well with Typogr.js and equivalents.

An example of small capitals.

Kerning

Kerning is turned on by default everywhere, and carefully turned off where it isn’t appropriate. A monospaced typeface’s application is ruined when automatic kerning is turned on. This is not the case with Normalize-OpenType.css; your code blocks have been preserved.

A kerning example.

…and more

There’s more optimisations included, so you don’t have to think about them: Lining, tabular numerals in code blocks, uppercase fallbacks for small capitals, and proper subscript and superscripts.

Getting started

Normalize-OpenType.css aims to be as easy to use as its namesake, Normalize.css. If it’s not that easy, please open an issue. Get the latest version of the CSS file here:

Get the latest version of the CSS file

Alternatively, use the package manager and build tool of your choice:

With npm

npm install normalize-opentype.css

With Component

component install kennethormandy/normalize-opentype.css

With bower

bower install normalize-opentype.css

Include

Though technically Normalize-OpenType.css is not dependent on Normalize.css, the intent expectation is that the former would not be used without the latter. If you’re dropping in stylesheets:

<link src="css/normalize.css" rel="stylesheet" />
<link src="css/normalize-opentype.css" rel="stylesheet" />

If you’re using a preprocessor through something like Harp, you can import the files instead.

@import "normalize";
@import "normalize-opentype";

Caveats

This library does the best it can with what it has. In order to use any of these optimisations, they must also be available in the font you are using.

I’m working on some blog posts and documentation about this, and will be sending them out via email if you’re interested.

There’s also a bug in Open Sans on Windows 7, with IE10 and 11, that’s caused by font-feature-settings, which this stylesheet uses heavily. We’re keeping an eye on it.

Running locally

If you’d like to see the test suite, or just want to view things locally, use the following:

git clone https://github.com/kennethormandy/normalize-opentype.css
cd normalize-opentype.css
npm install

To view the tests:

npm test

To compile any changes:

npm build

Contributing

Thanks for considering contributing! There’s information about how to get started with normalize-opentype here.

If you’re new to all this GitHub, Open Source, JavaScript, Node.js, testing, wow all this stuff seems really difficult I just want to make my sites better stuff, I get it. I’m still there, too. Feel free to send me an email or open an issue here and I’ll do my best to share some resources that have helped me out.

Colophon

Normalize-OpenType.css’ wordmark, examples, and some tests set in the Klinic Slab, designed by Joe Prince. The manicules were designed by Cade Cran for Dan Gneiding’s Dude Hank Pro. Both are available through the wonderful Lost Type Co-op.

Additional tests use Fira from Mozilla, and Source Code Pro from Adobe.

License

The MIT License (MIT)

Copyright © 2014–2015 Kenneth Ormandy

normalize-opentype.css's People

Contributors

dukex avatar janzelc avatar kennethormandy avatar kpeatt avatar rastus-vernon 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  avatar

normalize-opentype.css's Issues

Add vendor prefixing to distributed Sass version?

While normalize-opentype.css includes the vendor prefixing, normalize-opentype.scss doesn’t and will work best with Autoprefixer and the like. I’m open to reevaluating how this is done, if you’re using Sass and have a strong opinion, please share your setup! One option would be a vendor-prefixed version in dist/ or dropping the Sass version entirely, as I also want to avoid confusion about which file to use.

I think the ideal solution would be if libsass added support for importing plain CSS files.

font-variant

Hi!

I found your project today and I'm reading it.It looks really cool! And useful! Congratulations. While studying it, I found this:

Whenever possible, Web authors should use the font-variant shorthand property or an associated longhand property, font-variant-ligatures, font-variant-caps, font-variant-east-asian, font-variant-alternates, font-variant-numeric or font-variant-position.

For now, the values accept by browsrs other than Firefox are:

  • normal
  • small-caps
  • inherit

I think you can leave this issue opened until the right moment comes.

Thanks!

Contextual alternates should be on by default

the UI suggestion for {calt} in the OpenType Layout tag registry is that it be implemented by default.

—Kent Lew, [source](http://typedrawers.com/discussion/651/normalizing-opentype-feature-defaults-in-css#latest)

I didn’t make any assumptions about this yet, so this will be more of an addition. I was going to only try and turn on calt for scripts somehow, but apparently this is the right behavior anyway.

Poor performance when there are a large number of text nodes (in Chrome OS X)

This is more of an FYI for your reference rather than a bug because I believe the issue is with Chrome itself (OS X only - Windows and Linux seem fine, as are FireFox, Safari and IE).

I've noticed if you have a very long page with a lot of text nodes there is a definite lag before users are able to interact with the page, i.e. before they're able to scroll, or click. You can see the page and the contents, and it's styled, but you can't do anything.

This site uses normalize-opentype and all but one of the pages are fine - we had to remove it from this page due to the performance issue mentioned above. I don't have a working example of the problem unfortunately (as I said before, I removed normalize-opentype from the page we were having problems with).

Let me know if you've come across this before and if you have any thoughts on it. Maybe if I have some spare time I'll set up a test page to see if I can replicate the problem. Of course it's very likely that new versions of Chrome on OS X will fix it...

Add a real example

I would like to see a real demo of this library to see how it works on my machine without having to download the whole thing and test it on my machine.

@extend body; in table produces undesired results

In the code there is:

/**
 * 1. Resets tables to the same settings as the body.
 * 2. Turns on tabular, lining numerals and slashed zero
 */

table {
  @extend body; /* 1.*/
}

However, this can have unfortunate results depending on the styles you have applied to body. For example, the site I'm currently working on has a dark background colour applied to body, which is subsequently being applied to all tables.

It took me ages to figure out why my tables were 'inheriting' the dark background colour - it was only by disabling some of my imports that I was able to narrow it down to normalize-opentype, and then to this specific line of code.

I can, of course, get round this by overriding the background colour on tables, but I wondered what your thoughts are on this? Isn't this @extend a bit 'far reaching'?

Property not being applied in FF, Chrome and Chrome Canary

I am using the normalize-opentype.scss file, importing it into my main sheet.

We are using TypeKit and the Scala Sans font.

In current versions of FF and Chrome (Mac) as well as current Chrome Canary (Mac), the font-feature-settings property are labelled as Unknown Property Name (in Chrome Canary) in Chrome Dev Tools and is just not listed at all in FireBug in FF (elements are listed - h1, h2 etc, but the rule is empty).

I cannot post a link at this time. If it is necessary, I can make a demo page.

npm package

Please register an actual npm-package (npm publish). normalize-opentype name is free to register.
It’s far more convenient in npm to use npm repo that github.

Typo "numer" for "number"

In normalize-opentype.css, on line 94 input[type="numer"] should be input[type="number"]. I was going to do a pull request, but wasn't sure if it was worth figuring out SUIT CSS for a one-character change. :)

Use tabular numerals for phone numbers?

I realised it would be possible to use different numeral sets for phone numbers (and possibly other things) in certain context. For example, in a paragraph you might want a phone number with old-style numerals:

screen shot 2014-07-24 at 3 44 32

But in most other situations you’d probably prefer tabular numerals:

screen shot 2014-07-24 at 3 45 47

I’m undecided if this within the scope of this reset. Probably my biggest deterrent is that it would use a less-than-popular selector:

a[href^="tel:"] {
  font-feature-settings: "tnum" 1, "pnum" 1, "kern" 1; /* Etc. */
}

This particular feature might be better saved for a “Going beyond Normalize-OpenType.css” set of examples, which could include the features you need to have an opinion on to use, like stylistic sets. I’m pretty open to opinions on it.

Is `text-rendering: optimizeLegibility` still seen as problematic?

After #2 has been fixed more than 2.5 years ago and Android 2.3 shouldn't be of any concern any more, I wonder if text-rendering: optimizeLegibility shouldn't be the included for Gecko/Blink/Webkit browsers and the font-feature properties for ~5% market share of Microsoft browsers?

Use `inherit` instead of carrying settings down manually

Need to test this more, but apparently this works in some places:

body {
  font-feature-settings: "kern" 1, "smcp" 1;
}

p {
  font-feature-settings: "smcp"; /* This acts like you wrote `"kern" 0;` which is annoying */
  font-feature-settings: "smcp" 1, "smcp" 1; /* What I’m doing now */
  font-feature-settings: "kern" inherit, "smcp" inherit; /* Verbose, but easier to maintain. */
}

Tag as v1.0.0

Thanks for the cool tool. Is it relevant today? If not, what exactly needs to be improved / added?

Numbers not displaying

I'm using the Karla font with normalize-opentype.css on my blog (see the repository for full source code). Here's the problem:

Problem

It appears that numerical characters are not displaying but if I turn off -webkit-font-feature-settings: "kern" 1, "liga" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 0;, the numbers appear (however the type is different and worse than it was with that turned on).

Are you planning to write more code?

If you can find some time to get rid of all TODOs in the stylesheet, that will be so awesome :shipit: 😊 Let me know if you need any help.

Thanks a lot for this cool project 👍

might be problem: font-feature-settings with Open Sans webfont in Win7 IE 10/11 no text problem

Sorry I did not check yet if your "lib" will trigger this problem too but I guess it does.

Original ticket at Microsoft is here: https://connect.microsoft.com/IE/feedback/details/831964/font-feature-settings-with-open-sans-webfont-in-win7-ie-10-11-no-text-problem

It only occured for "Open Sans" for me but there may be other font that trigger this which basically destroys the page completely, somehow in IE10/Win7 only.

So this may not be a problem your code should prevent but maybe a note on the front page to look out for this possible problem would make sense.

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.