nathanford / type.js Goto Github PK

The description says "Typo.js – remedying CSS’s typographic oversights." Everywhere else "Type.js" is used.

Slightly odd that the main change you see when you turn on/off type.js is that the monotype font kerning kicks in. Feels weird to use monotype font to show this considering their nature. A dodgy serif might work a little better and be more... ugh 'authentic' forgive that word usage, still pre-coffee

be cool to support finding and closing rivers inside of some parameters. Some non-js implementations:

http://dsp.stackexchange.com/questions/374/river-detection-in-text

http://tex.stackexchange.com/questions/4507/avoiding-rivers-in-successive-lines-of-type

I’m bringing up the possibility for this plugin to support ladder suppression, i.e. the ability to detect consecutive line-end hyphens and choose to not hyphenate certain lines. This could be set to only hyphenate one line, or to stop hyphenating after a certain number of consecutive hyphens.

For a graphical example:

For reference, Mathias Nater’s hyphenator.js (https://github.com/mnater/Hyphenator) explicitly does not support ladder suppression, since

There’s no way for Javascript to influence the algorithm for laying out text in the browser. Thus we can’t control how many hyphens occur on subsequent lines nor can we know which words have actually been hyphenated. Hyphenator.js just hyphenates all of them.

Perhaps consider using pages.github.com to host the site?

(branch to gh-pages and push it, then in https://github.com/nathanford/type.js/settings switch the default branch to it, and then delete the master branch :)

can i ask?how to install type.js via online, like im only put css or js im index.html
thanks

Individual kerning by span injection has some accessibility trade offs (screen readers pause at every HTML element). This was an issue in Lettering JS which does a similar thing. That has been fixed (as detailed in the issue linked) so could a similar approach be used for Type.js? If that sounds like it could be a possibility I'll try and get a PR together

This looks like an awesome project btw.

I have a bunch of center aligned text but using padding-left OR padding-right doesn't work because it will uncenter the text. It would be nice to have an option to have padding-left AND padding-right to keep the centering.

If the last word of the last line of an element gets hyphenated (using CSS hyphenation) it doesn’t trigger the widow tamer. This results in a widow like “-wordending.”

How to do an on-complete event?

Thanks for building these tools. It looks like your intent is to share them for anyone to use, but I don't see a license listed. Would you consider adding an MIT license or something similar?

index.html and README.md do not seem to be sync'ed:

diff --git a/README.md b/README.md
index 124ff00..19d460a 100644
--- a/README.md
+++ b/README.md
@@ -59,7 +59,7 @@ Set rules for how you want to adjust styles to eliminate widows – or any group
 #### Properties
 `widow-adjust` accepts the style property you want to use to fix your paragraph.
 ```CSS
-rag-adjust: padding-right;
+widow-adjust: padding-right;

Cool project! Would love a way to be able to change the properties of numeric strings, as we often have webfonts where the numbers are aligned differently then the rest of the glyphs.

I was

wondering

If you could

please share

your .editorconfig file.

(

Because

code with too much vertical . . . . . . . . and horizontal spacing

is hard for me

to sort in my small mind.

)
;)

Hi there! type.js can't be found in Bower and no bower.json is present.

Hi~
Adding tags for repo could specify points in history and mark release points.
It's helpful for user to know the version and status of repository, and would enable wider distribution of the library, for example on CDNJS
Would you please consider on using tags?

Thanks for your great work!!
Piicksarn

Lines seem to break prematurely i.e. “… based [gratuitous break] on the feedback …”

I want to end the debate!
I personally find extra spaces after the end of a sentence; aids scan-reading.

In this example, here's the default text setting:

When I add widow-adjust: padding-right, I would expect type.js to create me a more balanced two-line title (with just the last two words on the second line). Instead by default it does this:

There is no existing margin or padding on the title, and it's the same width as the image.

Hi,

I saw your note about how when the "externalCSS" flag is set to true that an extra request is made to get the contents of the linked stylesheets. You can use the document.styleSheets property which is a list of stylesheet objects on the DOM. The cssText property of these objects should contain the string of the CSS. cssText is available in IE9+, Webkit and also Firefox so you may need to fallback if you have to support < IE9 but it should help you not having to re-request the linked stylesheets.

I'm using typed.js and it's working perfectly on desktops but not on mobile devices. If you take a look at http://anideaforanapp.com/#!/home from a mobile device and have a look at it from a desktop you'll see how it acts differently where the text seems to freeze and then come up all of a sudden.. it's just odd.

I tried resizing my desktop browser window to see if I can get the same result but I couldn't so it seems like it's not a responsiveness issue.

very cool project! wanted to mention that the typejs site does a flash of unstyled text upon load.

I think everyone solves this a little differently but typekit has a nice post on it: http://help.typekit.com/customer/portal/articles/6852-Controlling-the-Flash-of-Unstyled-Text-or-FOUT-using-Font-Events

Thinking of this as a way to handle hanging punctuation in as abstracted a way as possible. Perhaps something like this:

Define classes that follow the (not yet implemented anywhere) spec as outlined here:
https://css-tricks.com/almanac/properties/h/hanging-punctuation/

So, for a paragraph that begins with double quotation marks, this might be added:

class="beginswith-dq"

or if it's single quotation marks:

class="beginswith-sq"

And if it ends with double quotation marks:

class="endswith-dq"

These could be added wherever necessary, so if it's a quote in a paragraph on its own you might have:

class="beginswith-dq endswith-dq"

There are likely a relatively small number of punctuation marks to consider. I think they should be referenced specifically thought because if you were using CSS to hang the punctuation nicely you would want to only bring it back out a small amount for a single quote and slightly larger amount for double quotes.