mundschenk-at / wp-typography

Improve your WordPress micro typography.

wp-Typography

Improve your web typography with:

• Hyphenation — over 70 languages supported

• Space control, including:

  • widow protection
  • gluing values to units
  • forced internal wrapping of long URLs & email addresses

• Intelligent character replacement, including smart handling of:

  • quote marks
  • dashes
  • ellipses
  • trademarks, copyright & service marks
  • math symbols
  • fractions
  • ordinal suffixes

• CSS hooks for styling:

  • ampersands,
  • uppercase words,
  • numbers,
  • initial quotes & guillemets.

wp‐Typography has the following requirements:

• The host server must run PHP 7.4.0 or later,
• your installation of PHP must include the following PHP extensions (most do):
  • mbstring,
  • DOM, and
• text must be encoded in UTF‐8.

wp-Typography can easily be ported to any other PHP-based content management system. The Composer package mundschenk-at/php-typography assembles all typographic functionality (without any WordPress-specific code) in an object oriented format that is ready use.

View the wp-Typography homepage for more information.

Frequently Asked Questions

FAQs are maintained at the wp-Typography website.

Three questions come up so frequently, we will republish their answers here:

Will this plu­gin slow my page load­ing times?

Maybe. For best performance, use a persistent object cache plugin like WP Redis.

This plugin breaks post title links. What gives?

More likely than not, your WordPress theme is using an improper function to set the title attribute of your heading's link. It is probably using the the_title() function, which delivers the post title after filtering. It should be using the_title_attribute() which delivers the post title before filtering. Change out this function throughout your theme when it is used inside of an HTML tag, and the problem should go away.

If you are uncomfortable editing your theme's code, you may alternatively go to the wp-Typography settings page in your admin panel and add h1 and h2 to the "Do not process the content of these HTML elements:" field. This will disable typographic processing within improperly designed page title links and page titles.

What are the privacy implications of using the plugin?

wp-Typography does not store, transmit or otherwise process personal data as such. It does cache the content of the site's posts. If necessary, you can clear this cache from the plugin's settings page.

Changelog

A detailed release changelog can be found on the wp-Typography website.

wp-typography's Issues

Support dash replacement for different languages

Currently, smart dash replacement only works according to English language rules. This should be selectable.

Add CSS class for ordinal suffixes

Currently smart ordinal suffixes just use <sup> without a CSS class. This makes it impossible to distinguish them from smart fractions for styling purposes. Inspired by fabianmichael/kirby-typography#1.

Proper handling of compound words with hyphens

wp-Typography treats words with hard hyphens (most likely compound words, at least in languages other than English) as special, not applying its hyphenation etc. on the parts.

Transform registration marks and 501(c)(3)

Copied from https://wordpress.org/support/topic/bug-transform-registration-marks-and-501c3?replies=2#post-8360072

When having the Transform registration marks option checked, the (c) portion of 501(c)(3) is converted to a copyright symbol, of course. But technically, that's not supposed to be a copyright symbol (and means something else.)

The Transform registration marks option should have an exception to when it applies, when the (c) is directly preceded by 501. (Since there are a bunch of types of 501(c) organizations.)

Update list of valid TLDs from IANA list

The valid TLDs for email parsing should come from the canonical IANA list.

problems with db-use

i was urged to disable the plugin, because it causes a huge writing load in the database. it seems, that the plugin read/writes the typo_transient_keys with such a frequency, that the server didn't work anymore ...
my hoster-admin suggested, that there may be no/a faulty clean-up-mechanism for these sql-statements.

Cache results via Transient API

The plugin should cache its results via the WordPress Transient API. Since we probably need to integrate two MD5 hashes, this will have to wait until after WordPress 4.4 is released because of Trac #13310.

Smart quotes do not work

The issue can be closed. The bug seems to be gone...

Ampersand wrapping in HTML title element

Hi

I'm using the stock Twenty Sixteen theme and on the single post page for posts with an ampersand in the title, the ampersand is being wrapped with the <span class="amp"> in the content of the HTML title element.

I have checked and title is one of the disallowed tags so I'm not sure why the HTML title is being processed? I read the FAQ about title links but as I'm using the stock theme and this is about the HTML title rather than anything in the page content, I'm not sure what to do.

Thanks

Cache needs to be busted on upgrade

Two things need to be done:

• Add cache busting on version upgrades
• Add a button to delete all cached transients

Improve hyphenation performance

Either write a new hyphenation routine using tries or re-use an existing third-party implementation like heiglandreas/Org_Heigl_Hyphenator, nikonyrh/hyphenator-php or vanderlee/phpSyllable.

Improve hanging punctuation

Improve hanging punctuation implementation based on suggestions by Олег Резников https://jsfiddle.net/tkpvjrxk/1/

French punctuation: insert ` ` for literal `«` and `»`

Use case: input text was correctly typed as « bonjour » or copied from a word processor that converts straight quotes to « and » for French documents.

Provided the following input:

Les « courants de bord ouest » du Pacifique ?
Eh bien : ils sont "fabuleux".

I'm getting this result (with hyphenation turned off):

Les « courants de bord ouest » du Pacifique ?
Eh bien : ils sont « fabuleux ».

Ideally, I would like the set_french_punctuation_spacing method or other relevant setting (not sure for wp-Typography, since I'm using https://github.com/fabianmichael/kirby-typography and its settings are named and managed differently) to deal with « » quotes in the same way it deals with ?!:;, i.e. to transform «\s+ to «  and \s+» to  ».

Since it's a setting for French, there should be no doubt whether » is a closing or opening quote (it's a closing quote).

Would that be doable in PHP_Typography?

PS: issue ported from fabianmichael/kirby-typography#8

Workaround for safari hyphenation bug causes wrong rendering in Chrome on initial page loads after link clicks, disappears after redraw

• wp-typography 3.1.3
• Chromium 48.0 and Chrome for Android 48.0

The "Add workaround for Safari hyphenation bug" is causing trouble in Chrome, both for desktop and Android. See the following screenshot:

The words apparently set in a "lighter" font are the hyphenated words (where ­ has been added by wp-typography), and they're shown in the correct font (Raleway). I'm unsure which font the rest of the words are in. It's not the default theme font (Merriweather). It might be the default font in the browser.

Here's how it's supposed to look:

I have turned off the "Safari workaround" setting on the live website now, but I can turn it on again if you want to do live debugging.

To reproduce this bug, I went to http://www.relativisticramblings.com (my blog). The bug does not appear on the front page initially. If I clicked on a post the error appeared on the post page. Furthermore, if I clicked the logo to get back to the front page, the error was visible there now.

Any kind of redraw seems to get rid of the error. This includes reloading a problematic page, entering responsive view in the Chrome developer tools, changing any CSS rules in the developer tools, or hitting a break point while resizing the window.

In other words, the error only seems to appear when you land on a page by clicking on a link.

The error doesn't appear in Firefox. I haven't tested other browsers.

Correct typographic spaces for French (a few tweaks needed)

Although it’s hard to find precise recommendations for correct spacing around punctuation in French. After reading a lot about “orthotypographie”, I have gathered that the exact rules are:

1. Full no-break space before the colon (:). (Technically this space should not vary when using text-align:justify, but that’s a browser limitation that wp-typography can do nothing about.)
2. Narrow no-break space before »;?!.
3. Narrow no-break space after «.

The meaning of those rules is that a little bit of space around certain punctuation characters is considered more readable (I’ll note that it’s also used by some English language publishers for ;?!, though they tend to prefer thin spaces over the narrow space), and that space should not be too big (not a full space), except for the colon because instead of closing a proposition (like the other characters do) it creates a bridge from one proposition to the next (hence the full space). That’s the rationale I’ve read anyway. :)

Other punctuation signs don’t have extra space, or use regular breaking spaces, and don't concern wp-typography.

Also some publishers, typographers, graphic designers etc. may tweak these rules a bit or a lot, which is a given in any publishing and graphic design environment. For instance I know a typographer who uses «» with hair spaces instead of narrow spaces, and in graphic design many use “English” quotes (“”) for posters or book covers, though novels tend to keep the «» with narrow non-breaking spaces.

Changes that would be needed in php-typography to enable those rules:

Use PHP_Typography::chr['noBreakNarrowSpace'] for doubleGuillemetsFrench quote style:

https://github.com/mundschenk-at/wp-typography/blob/master/php-typography/class-php-typography.php#L301

            'doubleGuillemetsFrench'   => array( 'open'  => $this->chr['guillemetOpen'].$this->chr['noBreakNarrowSpace'],
                                                 'close' => $this->chr['noBreakNarrowSpace'].$this->chr['guillemetClose'] ),

Separate the spacing for the colon (:) from PHP_Typography::regex['frenchPunctuationSpacing']:

https://github.com/mundschenk-at/wp-typography/blob/master/php-typography/class-php-typography.php#L1091

        // french punctuation spacing
        $this->regex['frenchPunctuationSpacing']             = '/(\w+)(\s?)([?!:»])(\s|\Z)/u';
        $this->regex['frenchPunctuationSpacingColon']        = '/(\w+)(\s?)(:)(\s|\Z)/u';

and https://github.com/mundschenk-at/wp-typography/blob/master/php-typography/class-php-typography.php#L2700

        $textnode->data = preg_replace( $this->regex['frenchPunctuationSpacing'],             '$1' . $this->chr['noBreakNarrowSpace'] . '$3$4', $textnode->data );
        $textnode->data = preg_replace( $this->regex['frenchPunctuationSpacingColon'],        '$1' . $this->chr['noBreakSpace'] . '$3$4', $textnode->data );

With those changes, if users activate the narrow no-break spaces, they should get perfect French punctuation spacing with supporting browsers and fonts.

PS: the modified code extracts are for illustrating how the rules could be implemented. I haven’t actually tested them or ran this code. I could perhaps make a PR but that would be in 10 days at best.

Pretty logo

wp-Typography would benefit from a nice logo (and maybe a banner as well).

"Duplicate ID" warnings with certain versions of libXML2

Hi,

Wp-typography is conflicting with YITH Woocommerce Social Login on my site. I get this error whenever I get to the social login screen:

Warning: DOMElement::setIdAttribute(): ID wpnonce already defined in /home/*****/public_html/_*/wp-content/plugins/wp-typography/vendor/Masterminds/HTML5/Parser/DOMTreeBuilder.php on line 424

By the way, wp-typography is a great plugin. I hope you can solve this issue.

Create importer for hyphenation files

All the current hyphenation files have been imported manually. There should be an automatic process to do that.

Optionally fix incorrect dashes (n-dash instead of m-dash or vice-versa)

Sometimes users try to do the right thing, but use the wrong dash.

Don't use primes where not appropriate

Quotes after numbers should not always be replaced by primes.

https://wordpress.org/support/topic/longstanding-bug-quotes-become-feetinches-after-numerals?replies=1

Gracefully handle duplicate IDs

The HTML5 parser should gracefully handle duplicate IDs without creating a warning (see #12). Since HTML5-PHP is still discussing the issue, this will have to be done via a custom error handler.

"Enable wrapping after hard hyphens" creates unnecessary whitespace

"Enable wrapping after hard hyphens" creates two (!) zero-width spaces even when the hyphen is already followed by a space.

The Safari hyphenation bug workaround causes invisible text on IE11

See thoughtbot/bitters#200 they discuss about the exactly same problem. If you need a page to see this problem in action just go to https://sakkiry.fi/en/sakki-info/ and turn off the font-feature-settings: normal !important; override.

Pics or it didn't happen.

Extreme DB usage due to this plugin

We just updated WP from 4.4.0 to 4.4.1 and this plugin to version 3.1.1 and our DB server went nuts immediately.
It created nearly a million _transient_typo (_timout_typo) entries in the DB.

This shot our DB server to 100% CPU and degrades total performance a lot.

I removed the plugin now and deleted all its _transient DB entries -> freed 2.5 GB diskspace!!

The identifiers you use for the name seem very "random" or at least a hash of something bound to time or so. Please check that.

Add a way for theme developers to call WP_Typography::process

Due to lazy initialization, plugin and theme developers can't easily create their own WP_Typography object. For to performance reasons, they should not, either. wp-Typography has to provide a clean way to call WP_Typography::process() on arbitrary strings.

Hyphens in <title>

Some Browsers don't deal well with hyphens in the title-element. I think wp-typography tries to address this in /includes/class-wp-typography.php in the section commented with

// extra care needs to be taken with the <title> tag

by adding the filter process_title_parts() to document_title_parts. This doesn't have any effect on the title-element, because wp_title() uses wp_title_parts() and not document_title_parts(). Changing

add_filter( 'document_title_parts', array( $this, 'process_title_parts' ), $priority );

to

add_filter( 'wp_title_parts', array( $this, 'process_title_parts' ), $priority );

fixes the issue here.

Grüße, Matthias

Sort languages by current locale

The language lists should be sorted according to the rules of the current locale.

Problem with smart quotes after opening bracket

See https://mundschenk.at/unter-insektenfressern/#comment-13119:

("Some" word

is replaced with

(“Some“ word

instead of using the proper smart quotes.

Add CSS classes for numerator and denominator in smart fractions

Currently, no CSS classes are added to smart fractions to distinguish them form other uses of <sup> and <sub>. Inspired by fabianmichael/kirby-typography#1.

Multilingual support

wp-Typography should honor the current content language when running on a multilingual installation.

Advanced Filter Configuration option

Sometimes there are issues with other plugins that would make it beneficial to be able to switch off certain seldom used content filter (e.g. on widget_text) to prevent double parsing by WP_Typography::process() and the resulting side effects.

Add API documentation

As suggested in #28, the current API documentation is basically non-existent.

Problem with smart quotes and nested HTML

The smart quotes function on master currently strips two characters at the start and end if the contained string contains HTML tags.

Make CSS classes adjustable in PHP_Typography

Make CSS classes adjustable for easier re-use of PHP_Typography. Raised by @fabianmichael in fabianmichael/kirby-typography#1 (comment).

Remove obsolete references to IE6

• %1$s Force thin spaces between em & en dashes and adjoining words. This will display poorly in IE6 with some fonts (like Tahoma) and in rare instances in WebKit browsers (Safari and Chrome).
• %1$s Remove zero-width spaces from IE6.
• IE6 displays mangles zero-width spaces with some fonts like Tahoma (uses JavaScript).

Hanging punctuation

Add CSS hooks for hanging punctuation, similar to https://github.com/davidmerfield/Typeset/blob/master/src/hangingPunctuation.js

Use tabbed navigation to simplify the settings page

Proposed by @anselm-urban via https://wordpress.org/support/topic/suggestion-tabbed-navigation-for-plugin-settings?replies=1#post-8621370

Prevent spurious (soft) hyphens from cropping up in pasted text when hyphenation is enabled

Several legacy applications (including Facebook) can't deal properly with soft hyphens. Add some JavaScript code to remove those when copying to the clipboard.

Support French punctuation style

For French, add a narrow no-break space (U+202F) before an exclamation mark or a question mark. If there is already a space, replace it.

https://wordpress.org/support/topic/feature-request-space-before-punctuation-for-french?replies=1

Widow control: make number of words to keep together configurable

"When it comes to widow control, please allow us to increase the number of words required to complete the final line. I'd like to have a three word minimum on the final line, not just two."

https://wordpress.org/support/topic/feature-request-configure-minimum-number-of-words-for-widow-control?replies=1

The plugin version 3.3.0 seems to be missing JavaScript files

I'm getting errors like this:

I downloaded the plugin from the WP plugin directory and the plugin folder doesn't have any JavaScript files in it.

Language-specific default settings

Default settings/options should depend on the site language. Existing installs will not be affected unless the "Restore Defaults" button is used.

Add thousands separator to large numbers

See http://typefacts.com/artikel/zahlengliederung-digital for an example.

ACF support

Add support for Advanced Custom Fields (via acf_the_content).

Add filters for various settings

Settings like the transient caching time should have filters for programmatic adjustment.

Update IANA domain list via Grunt

The IANA top-level domain list from #1 should be updated via Grunt.

Smart Fractions should not process "date-like" values

Smart fractions should not process date-like values, e.g. "issue 4/2015" or "in the fiscal year 2014/2015".

Investigate nested CSS classes for mixed numbers and caps

300AAA appears to result in <span class="caps"><span class="numbers">300</span>AAA</span>. Do we want this?

Smart fractions & prime symbols

Fractions are not styled prettily if they are followed by a prime symbol. Also, prime symbols are not replaced properly after fractions.

From https://wordpress.org/support/topic/prime-symbol-and-pretty-fractions

Fatal error after unserialize

In some hosting environments, there PHP_Typography gets unserialized before the class definition is loaded:

Fa­tal er­ror: WP_Typography::get_php_typo(): The script tried to ex­e­cute a method or ac­cess a prop­erty of an in­com­plete ob­ject. Please en­sure that the class de­f­i­n­i­tion “PHP_Typography\PHP_Typography” of the ob­ject you are try­ing to op­er­ate on was loaded _​before_​un­se­ri­al­ize() gets called or provide a _​_​autoload() func­tion to load the class de­f­i­n­i­tion in /home/content/p3pnexwpnas09_data02/11/3172511/html/wp-content/plugins/wp-typography/includes/class-wp-typography.php on line 411

It looks like this might be the same problem as http://pyebrook.com/diagnosing-a-wp-ecommerce-error-on-godaddy-hosting-with-php-apc/ and https://wordpress.org/support/topic/fatal-error-pll_model_languages_list (i.e. a bug in APC Object Cache used by GoDaddy).