Why are there strange char­ac­ters on my site when it is viewed with Sa­fari?

There is a bug in the shipped Sa­fari 9 that re­sults in strange char­ac­ters be­ing ren­dered when both lig­a­tures and soft hy­phens ap­pear on the same line. (The bug is on­ly trig­gered when the font ac­tu­al­ly sup­ports lig­a­tures, e.g. with Open Sans.)

For­tu­nate­ly, adding the fol­low­ing line to your CSS fix­es the font ren­der­ing and pre­serves lig­a­tures:

-webkit-font-feature-settings: "liga";
font-feature-settings: "liga";

If you en­able Add workaround for Safari hyphenation bug, this CSS prop­er­ty is in­sert­ed in­to your page au­to­mat­i­cal­ly.

Why are open­ing quotes not be­ing styled?

This plu­g­in of­fers an op­tion to wrap ini­tial quotes in a span of class quo or dquo. You can then style these class­es in your CSS stylesheet. This is use­ful if you want to-​for example-​negatively in­dent quotes so the quote hangs in the left mar­gin and the text is aligned with the text be­low.

Please note, this ap­plies on­ly to ini­tial quotes — quotemarks that ap­pear as the first char­ac­ter of a block of text (like a para­graph or block­quote). This does not ap­ply to all open­ing quotes.

Why is copy-​and-​paste not work­ing prop­er­ly on my site?

This is a known com­pro­mise that comes with hy­phen­ation. The hy­phen­ation fea­ture works by in­sert­ing soft-​hyphen char­ac­ters at every pos­si­ble hy­phen­ation point. They are typ­i­cal­ly in­vis­i­ble, and should on­ly show up at the end of a line if the word wraps.

Un­for­tu­nate­ly, not every ed­i­tor is smart enough to prop­er­ly han­dle soft hy­phens. Text copied from your web page will in­clude soft hy­phen char­ac­ters. Some pro­grams will dis­play a space in­stead of a soft hy­phen. Some may dis­play ac­tu­al hy­phens. And it may break spell check even if the char­ac­ters are dis­played cor­rect­ly. If you want hy­phen­ation on the web, you must use soft hy­phens. If you use soft hy­phens, oth­er pro­grams may not like copied text.

Why does fil­ter­ing by HTML el­e­ment, class or ID not pre­vent pro­cess­ing?

wp-​Typography does not have ac­cess to HTML stored in your theme files. It on­ly has ac­cess to the con­tent passed to it (i.e. post ti­tle and con­tent); it is un­able to de­ter­mine the greater con­tex­tu­al aware­ness.

If you try to fil­ter pro­cess­ing based on a class of the body el­e­ment — as an ex­am­ple — noth­ing will hap­pen. wp-​Typography does not see the body el­e­ment. wp-​Typography does fil­ter by HTML el­e­ment, class or ID for any markup present with­in the parsed con­tent. So if you do not want class noTypo processed, fil­ter­ing will on­ly oc­cur with­in the ti­tle or con­tent of your post or page.

This plu­g­in breaks post ti­tle links. What gives?

More like­ly than not, your Word­Press theme is us­ing an im­prop­er func­tion to set the ti­tle at­tribute of your heading’s link. It is prob­a­bly us­ing the the_title() func­tion, which de­liv­ers the post ti­tle af­ter fil­ter­ing. It should be us­ing the_title_attribute() which de­liv­ers the post ti­tle be­fore fil­ter­ing. Change out this func­tion through­out your theme when it is used in­side of an HTML tag, and the prob­lem should go away.

Here are some spe­cif­ic in­struc­tions for fix­ing your theme. Please note that every theme is dif­fer­ent, so mileage may vary.

To ed­it the theme, log in as an ad­min­is­tra­tor and go to: Appearance > Editor. You will typ­i­cal­ly want to ed­it the fol­low­ing files (if they ex­ist):

  • archive.php
  • index.php
  • page.php
  • search.php
  • single.php

In each file, search for the code that looks some­thing like this:

<h2><a href="<?php the_permalink() ?>" 
       rel="bookmark" 
       title="Permanent Link to <?php the_title(); ?>;"><?php the_title(); ?></a></h2>

Your theme may con­tain some vari­a­tions. For in­stance, the h2 tags may be h1 or h3… We are look­ing specif­i­cal­ly for the part that says title=" … <?php the_title(); ?> … ". It should be changed to:

<h2><a href="<?php the_permalink() ?>" 
       rel="bookmark" 
       title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>

Save the files, and you should be good to go.

If you are un­com­fort­able edit­ing your theme’s code, you may al­ter­na­tive­ly go to the wp-​Typography set­tings page in your ad­min pan­el and add h1 and h2 to the “Do not process the con­tent of these HTML el­e­ments:” field. This will dis­able ty­po­graph­ic pro­cess­ing with­in im­prop­er­ly de­signed page ti­tle links and page ti­tles.