Kirby-Typography Plugin

Plugins
1

Hey folks, I just released the first alpha of my Kirby-Typography plugin. If you’re a typonerd like me, you might like it. :slight_smile: Feel free to download the plugin, tinker around with it and leave a feedback.

Cheers,
Fabian

Kirby-Typography

This is a port of wp-Typography for Kirby CMS. Based on the PHP_Typography class, this plugin enhances the typography of you kirby-powered website. Think of it a more advanced alternative to the built-in SmartyPants parser.

Current version: 1.0.0-alpha

Key Features

  • Hyphenation: Hyphenate text, very handy for justified text or languages with very long words, but also for English. Supports a large number of languages and offers fine-grained control over hyphenation.
  • Smart Replacements: Includes Smart quotes (i.e. „Curly Quotes“, «Guillemets», »Chevrons« or German „Gänsefüßchen“) and smart ordinal suffixes.
  • CSS Hooks: Add <span class="[…]"> tags around characters like ampersands, CAPITALIZED WORDS etc.
  • Hanging Punctuation: Add the twinkle of the print-era to your site.
  • Wraps URLs: Prevents long URLs from overflowing their container element on small screens.
  • Smart Math: Converts mathematical symbols into their correct counterpart. E.g. (2x6)/3=4 becomes (2×6)÷3=4.
  • Caching: Processing text like this plugin does is a very performance-hungry task. So the results are always cached, even if Kirby’s cache option is turned off. Cache will automatically be updated, if you change your content or update the plugin. It also comes with a Dashboard Widget, so you can flush the cache from your panel.

… and basically every other feature of wp-Typography :slight_smile:

Download & full information: https://github.com/fabianmichael/kirby-typography

18 Likes
2

Well, that’s one half-finished plugin I can stop developing. :smile:

1 Like
3

Looks amazing – thanks for sharing this :slight_smile:

1 Like
4

You’re welcome! :slight_smile: If you have any suggestions how I could further improve this, please let me know.

5

Hello, Hola, Hej, Hallo, Grüezi, Алло, もしもし!

On GitHub, I was asked to change defaults to better match typographiy rules of United States English. I’d also like to add recommended settings for different languages/locales to the readme file of Kirby-Typography. For that, I need your help. If you’re familar to the typographic rules of languages other than English (US), German (Germany) or French, I ask you to to help me on this. Have a look at the settings and put together a ruleset for your language.

Your can comment directly on this issue to tell me, which default settings are best suitable for your language. Just use this comment as a template.

Thanks for your help! :slight_smile:

2 Likes
6

I tried the plugin now the last days, and overall I’m really impressed. However, there seems to be a serious issue with ligatures – this is how it is rendered, in both german and english language:

I’m using the default options for german text in my language-file, as described. When I turn off the plugin, everything works as expected. As well I am using this to enable CSS text settings:

text-rendering:                optimizeLegibility;
font-kerning:                  normal;
font-variant-ligatures:        common-ligatures, contextual;
-moz-font-feature-settings:    "kern", "liga", "clig", "calt";
-ms-font-feature-settings:     "kern", "liga", "clig", "alt";
-webkit-font-feature-settings: "kern", "liga", "clig", "calt";
font-feature-settings:         "kern", "liga", "clig", "alt";

-ms-text-size-adjust:          100%;
-webkit-text-size-adjust:      100%;

But also without these (or with other fonts), the problem is still there. Would be great if you could dig into this one, as I can’t use the plugin in production yet :wink:

Edit: The default CSS coming with the plugin is included, as well as the javascript file…

7

Hi, I haven’t encountered this issue yet, but the fonts I haven’t tested the plugin with ligature-heavy fonts yet.

The the plugin’s CSS file does not declare anything, that explains issues with ligatures. The JS file only ensures, that soft hyphens (those characters tell the browser, where a word can be hyphenated) are removed when text is copied to the clipboard, so it stays editable in a text editor or word processor without causing any unexpected behavior. I guess, one of the following is causing these problems you describe:

  • The text is not encoded correctly. This often happens, when it is copied from a PDF file. Please run the HTML output of the page through the HTML5 validator to make sure, that there are not any mal-encoded characters in your markup. Also make sure that your text is encoded in UTF-8.
  • PHP Hyphenation does not play nice with ligatures. Can you tell me, what font this is? Please try to turn off hyphenation by setting typography.hyphenation to false and see, whether this causes the error.

If the issue remains, it would be nice If I could have a look at your source code (at least the content txt file) to further investigate this.

8

Thanks for the fast answer!

That did the trick, although this is one of the features I like most :confounded: I’m using Merriweather Sans as Google Webfont here, but also tried it as local font and with Futura (served via Typekit and as local font). The result was the same in all four cases.

HTML5 validation and encoding are correct, I checked both of them.

Edit: the error also occurs when enabling the hyphenation but disabling it via CSS with hyphens: none. I guess the &shy; char is responsible for this?

Edit 2: I found the bug – it’s within WebKit (although this one has status fixed): 150006 – REGRESSION(r182192): Ligatures do not interact correctly with SHY in some fonts

The solution there which fixes the error is by using

font-variant-ligatures: common-ligatures;

instead of my setting

font-variant-ligatures: common-ligatures, contextual;

Everything works as expected now, with hyphenation enabled!

1 Like
9

Yes, it’s the &shy; char. It becomes a real UTF-8 char and if it is between two letters that normally form a ligature, the whole thing may break.

1 Like
10

@jakobploens @lukasbestle: Okay, so this bug seems to be only related to WebKit, right?. Is there anything I can/should do about it or should I just create a troubleshooting section in the readme?

I’ll do some tests on my own, but it will need a little time …

11

I think a troubleshooting section would be best – and maybe the property should be added to the css file, since without setting the right value, the issue occurs again…

And yes, as far as I have tested it only in WebKit.

12

Kirby-Typography has been updated and is in Beta now, using an unmodified version of the PHP-Typography library!

Grab a copy, while it’s hot: https://github.com/fabianmichael/kirby-typography

1 Like
13

Hi @fabianmichael can you tell me the difference between your plugin and the native kirby smartypants ? Ligatures ?

I’ve set this in my smartypants options:

c::set('smartypants', true);
c::set('smartypants.attr', 3);
c::set('smartypants.doublequote.open', '« ');
c::set('smartypants.doublequote.close', ' »');
c::set('smartypants.space.emdash', ' ');
c::set('smartypants.space.endash', ' ');
c::set('smartypants.space.colon', ' ');
c::set('smartypants.space.semicolon', ' ');
c::set('smartypants.space.marks', ' ');
c::set('smartypants.space.frenchquote', ' ');
c::set('smartypants.space.thousand', '');
c::set('smartypants.space.unit', ' ');

Also if you use an unmodified (last but old old) version of php library, I think there is few bug in it, check this version instead: https://github.com/judbd/php-typography

did you heard of Jolitypo? is it not a easier and more simple approach of typography correction ?

Great work though, I always wanted a robust system for french typography in CMS.

1 Like
14

Hey @judbd, the main difference is, that Smartypants (the built-in microtypography enhancer of Kirby) does not offer so many features, as Kirby-Typography does by utilizing PHP-Typography. If you’re fine with Smartypants, stick to it, because it is much faster (although KirbyTpography caches everything). You can just go to GitHub and compare the features of my plugin to those of Kirby. The main reason why I wrote KirbyTypography is, that I wanted to use server-side hyphenation on my Kirby-based websites. But there are a lot more features included …

The current maintainer of PHP-Typography just released a new version yesterday (see GitHub - mundschenk-at/wp-typography: Improve your WordPress micro typography.) and is actively working on improving the plugin. He also implemented options for setting custom classes only to make my plugin more flexible. So this should be the best version, I could use :slight_smile:

I heard of it and tried it, but it had some minor bugs and was rather limited. Most of the filters, which are already part of PHP-Typography are not yet part of JoliTypo. While the overall code architecture seems to be better, I can tell after about 5 years of using PHP-Typography, that it does it’s job quite well.

I hope this answers all of your questions :wink:

15

Yes great I will try it. it caches pages himself or I have to activate cache in Kirby settings ?

16

Kirby-Typography’s cache runs independent of Kirby’s page cache and is automatically updated, whenever you change your content, the plugin settings or when you update the plugin to a newer version.

17

to understand correctly, this replaces smartypants?

18

Yes, it is. Is just supports more advanced typographic enhancements (e.g. hyphenation, wrapping all-caps word in spans etc.). Look through readme readme for a complete list of features. If you just need basic typographic enhancements, I suggest that you keep on using SmartyPants. If you need fancy stuff like hyphenation or anything else not supported by SmartyPants, use Kirby-Typography. :wink:

19

Hi Fabian,
Thank you for your work.

I’m having a hard time deactivating hyphenation, or setting up any of the options of the plugin for that matter.
I’ve tried this in my config file:

c::set(‘typography.hyphenation’, ‘false’);

And I’ve even tried to edit the site/plugins/typography/lib/component/typography.php file for this option on line 116, also in vain.

I know the plugin has been successfully installed because it does its work, including breaking points for hyphenation in my text, math symbol substitution etc… and the widget appears in the Panel.
But it doesn’t respond to any change in the options.

Could you please help?
I’m sure I’m missing a very basic thing here, but I’ve been looking all day and still can’t see why.

Many thanks in advance!

20

The word false must not be quoted, as 'false' will be interpreted as a non-empty string which evaluates to true.

I hope this solves your problem?