Convert text to fractions

This tutorial features the Feast Plugin, which contains theme enhancements.

The Convert text to fractions setting fixes a significant accessibility issue with recipe sites, by replacing text such as ¼ with a proper fraction, like ¼.

Jump to:

• Accessibility
• Professionalism
• Fix
• Fractions covered
• Serving adjustment
• Technical notes
• 💬 Comments

Accessibility

This is because screen readers read text literally, so a measurement like

• "¼ tablespoon salt" is read out loud as "one slash four tablespoon salt"
• "¼ tablespoon salt" is read correctly as "one fourth tablespoon salt"

Using text instead of fractions is vague and confusing to those using screen readers, leaving them wondering if they should be using 1 or 4 tablespoons of salt, instead of ¼.

That's 4 or 16 times the actual amount!

Professionalism

Using proper fractions instead of text-based methods demonstrates that effort was made to present things professionally.

Just like you'd never publish a cookbook without proper formatting, your website shouldn't publish recipes without proper formatting.

Fix

Solving this for hundreds of recipes is as simple as checking off the option in the Feast Plugin:

This isn't just better for visually impaired users, it presents a much more professional recipe, like those found in professional publishing sites:

Fractions covered

We've included all the common fractions for recipe sites:

• ½ = ½
• ⅓ = ⅓
• ⅔ = ⅔
• ¼ = ¼
• ¾= ¾
• ⅕ = ⅕
• ⅖ = ⅖
• ⅗ = ⅗
• ⅘ = ⅘
• ⅙ = ⅙
• ⅚ = ⅚
• ⅛ = ⅛
• ⅜ = ⅜
• ⅝ = ⅝
• ⅞ = ⅞

Serving adjustment

Technical notes

• This does not change the contents of the recipe card, only what is output to the screen on posts
• This converts all text-based fractions in both the post content and the recipe card, on your posts
• This does not convert the output of the recipe card's "print" screen
• If you've set some third-party custom font for your post content or recipe card, the fractions may not be output in a legible way
• Because the fraction character is half the size of the text, you'll want to make sure you're using a body font size that's large enough for mobile devices (18 and above for most fonts)
• We haven't included sevenths because there is no character equivalents for this unusual measurement
• After enabling this, we recommend visiting your top 8 recipes to make sure the units make sense
• You may need to clear your cache for this to show up for non-logged-in users

Special shout out to WP Recipe Maker, which actually does have these fractions available for people to use, though we never seen them actually used in practice:

While you could go through all your recipes and manually replace these units in the WPRM recipe card, it still leaves unedited fractions in the actual post content.