Convert text to fractions

This tutorial features the Feast Plugin, which enhances and extends your theme to improve SEO, pagespeed, accessibility and user experience.

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

Jump to:

Accessibility

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

  • "1/4 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.

Sample Easy Chicken Korma recipe from Indian Instant Pot Cookbook by Urvashi Pitre

Fix

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

checkbox in the feast plugin to convert text-based fractions to their fraction character

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:

  • 1/2 = ½
  • 1/3 = ⅓
  • 2/3 = ⅔
  • 1/4 = ¼
  • 3/4= ¾
  • 1/5 = ⅕
  • 2/5 = ⅖
  • 3/5 = ⅗
  • 4/5 = ⅘
  • 1/6 = ⅙
  • 5/6 = ⅚
  • 1/8 = ⅛
  • 3/8 = ⅜
  • 5/8 = ⅝
  • 7/8 = ⅞

Serving adjustment

This has been tested with WPRM's serving adjustment feature and works fine. When scaling a recipe up or down, WPRM automatically converts fractions to decimals.

This means that if ¼ of salt is used for 1 serving, and the user scales the recipe to 2 servings, the output becomes 0.5, rather than ½. This is fine.

gif showing the ingredient measurements scaling up and down, using decimals

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:

WP recipe maker interface showing fractions
WPRM contains buttons to insert fractional units.

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.

4 Comments

  1. I can't find where to fix this issue within the Feast plugin. Can you offer guidance on where this feature is located?

    1. This is in the "Recommended" settings (the top) of the plugin in version 4.9.0 - just released. You'll need to update your plugin.

  2. I disagree with the fractions. They are very hard to see and I don't know of a single person who would think 1/4 teaspoon would read as 4 teaspoons of anything. This isn't a matter of professionalism, it is a matter of providing the best reader experience.

    I have been a food professional for over 30 years. I have written about baking and pastry for years, authored books and taught in college.

    Can this be overridden by deselection the fraction?

    1. Not using fractions is unfortunately an accessibility issue due to how screen readers read the text. This is a technical issue as much as a professional one.

      While we recommend enabling the setting, disabling it is as simple as unchecking the box.

Comments are closed.