DEV Community

Getinfo Toyou
Getinfo Toyou

Posted on

Building a Client-Side Text Analyzer: How I Designed ReadMetric to Solve the Readability Problem

As a developer who also writes, I’ve often found myself staring at a draft, wondering: Is this too dense? How long will it actually take someone to read this?

When writing for online audiences, attention span is everything. Whether you are drafting a technical tutorial, a marketing email, or a long-form blog post, understanding the metrics of your text is crucial. That is why I built ReadMetric (https://readmetric.getinfotoyou.com), a lightweight, client-side web application designed to analyze text statistics and estimate reading time.

Who Benefits Most from ReadMetric?

While anyone who writes can use it, three specific groups benefit the most from this tool:

  1. Newsletter Creators: If you run a weekly newsletter, you know your subscribers value their time. Telling them "This is a 3-minute read" right at the top manages expectations and increases click-through rates. ReadMetric gives you an accurate reading time estimation based on standard reading speeds, helping you trim or expand your newsletter to fit your target slot.
  2. SEO Bloggers: Search engines favor content that is easy to read. By analyzing the readability score (Flesch-Kincaid grade level), bloggers can see if their writing is too academic or just right for a general audience.
  3. Technical Writers: We have a tendency to write long, complex sentences. ReadMetric breaks down your text into sentence counts, word counts, and average sentence length, making it easy to identify where you need to break up run-on sentences for better clarity.

Why I Built It

Most existing word count and readability tools are cluttered with ads, slow to load, or send your text to a backend server. As a writer, I don’t want my drafts stored on someone else's database. I wanted a tool that was instant, clean, and 100% private. ReadMetric runs entirely in your browser; your text never leaves your device.

The Tech Stack

I kept the stack minimal to ensure the tool loads instantly:

  • HTML5 & Vanilla CSS: For a clean, responsive interface that works on mobile devices and desktops alike.
  • Vanilla JavaScript: To handle all the text parsing and calculations on the client side.

By avoiding heavy frameworks, the page size is tiny, resulting in sub-second load times.

The Technical Challenge: Syllable Counting in JavaScript

The most difficult technical hurdle was calculating the readability score. Most readability formulas, like the Flesch-Kincaid reading ease, rely heavily on syllable counts.

Counting syllables programmatically in English is notoriously tricky because English spelling is not phonetic. A naive vowel-counting approach fails on silent 'e's, diphthongs (like 'ou' or 'ea'), and words ending in 'es' or 'ed'.

To solve this without pulling in a massive, multi-megabyte external dictionary library, I implemented a rule-based algorithm in JavaScript. The system uses a sequence of regular expressions to filter out common silent vowels and count vowel clusters. For example:

  • It identifies and subtracts silent 'e' at the end of words.
  • It counts consecutive vowels (like "beautiful") as a single syllable.
  • It handles specific suffixes (like "-es", "-ed", "-ing") with custom adjustment rules.

While not 100% perfect for obscure words, this lightweight regex approach achieved over 95% accuracy compared to a full dictionary lookup, all while keeping the bundle size under a few kilobytes.

Lessons Learned

Building ReadMetric taught me that you don't always need complex backend architectures to build useful utilities. Client-side JS is incredibly fast at parsing text. By keeping the calculations on the client, I saved on hosting costs while providing a secure experience for the user.

If you are a writer, blogger, or developer looking to clean up your copy, give it a try at https://readmetric.getinfotoyou.com. Let me know what you think of the readability analysis!

Top comments (0)