Transform your Articles

For a while, reading blog posts on the YeneHealth app felt like squinting through fog.

Text was jammed up against the screen edges. Fonts were tiny and inconsistent. Paragraphs melted together without spacing, hierarchy, or structure. It felt like someone had dumped raw HTML into the app and called it a day.

And that’s exactly what happened.

The app’s mobile blog reader used the flutter_html package to render HTML content—but we never styled it. No typographic rhythm, no responsive spacing, no attention to how it felt to actually read. The content was there, sure. But it looked like it didn’t want to be read.

The Web had horrible styles. Telegram had web styles and mobile just got left behind.

HTML by itself doesn’t care about how it looks. That’s CSS’s job. And in the browser, that’s easy: you set a style tag or load a stylesheet, and you’re off to the races.

But in Flutter? Rendering HTML is just a starting point. The flutter_html package maps HTML elements to Flutter widgets, and if you don’t tell it how things should look, it just… doesn’t.

So when we pulled blog content from our CMS and rendered it using flutter_html, we ended up with this:

• <p> tags with no margin.
• Lists (<ul>, <ol>) with weird indentation and default bullets.
• <blockquote> elements that looked like normal text.
• Zero spacing between headers and paragraphs.
• No readable font, no consistent font sizes, no zoom.

It was readable the way a wall of raw Markdown is readable—technically possible, but practically painful.

Rebuilding the Reading Experience

I didn’t want to rebuild a full HTML layout engine. I just wanted to give the content room to breathe. So I started with the web styles that had been working well:

 body {
  font-family: Georgia, serif;
  font-size: 1.1rem;
  line-height: 1.8;
  color: #333;
  background: #fff;
  padding: 2rem 1rem;
}

 p {
  margin: 1em 0;
  line-height: 1.5;
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
}

 h1, h2, h3, h4 {
  font-size: x-large;
  margin: 2.5rem 0 1.5rem 0;
  line-height: 1.25;
  color: #333;
}

 ul {
  list-style-type: circle;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

 li {
  font-size: 1.1rem;
  margin-left: 2em;
  margin-bottom: 0.5em;
}

 blockquote {
  font-style: italic;
  border-left: 4px solid #ccc;
  padding-left: 1rem;
  margin: 1.5rem 0;
  background: #f9f9f9;
}

Then I translated those into Flutter styles using the flutter_html styling system:

Html(
  data: htmlContent,
  style: {
    "body": Style(
      fontFamily: 'Georgia',
      fontSize: FontSize(18.0),
      lineHeight: LineHeight.number(1.8),
      padding: HtmlPaddings.symmetric(horizontal: 16.0),
      backgroundColor: Colors.white,
      color: Colors.black87,
    ),
    "p": Style(
      fontSize: FontSize(16.0),
      margin: Margins.only(bottom: 20),
      lineHeight: LineHeight.number(1.6),
    ),
    "ul": Style(
      listStyleType: ListStyleType.DISC,
      margin: Margins.symmetric(vertical: 16),
      padding: HtmlPaddings.zero,
    ),
    "li": Style(
      fontSize: FontSize(16.0),
      margin: Margins.only(bottom: 8, left: 24),
    ),
    "blockquote": Style(
      fontStyle: FontStyle.italic,
      padding: HtmlPaddings.only(left: 16),
      border: Border(left: BorderSide(color: Colors.orange, width: 4)),
      backgroundColor: Color(0xfff9f9f9),
      margin: Margins.symmetric(vertical: 24),
    ),
    "h1": Style.fromTextStyle(headerStyle),
    "h2": Style.fromTextStyle(headerStyle),
    "h3": Style.fromTextStyle(headerStyle),
    "strong": Style(
      fontWeight: FontWeight.bold,
      color: Colors.black87,
    ),
    // Add more tag styles as needed
  },
)

Each element got just enough care to read clearly. Paragraphs had room. Lists were indented and styled. Quotes were visually distinct. And above all: it looked intentional.

Not flashy. Just thoughtful.

Why It Matters

In the end, this wasn’t about style—it was about respect.

Respect for the reader’s attention.
Respect for the writer’s voice.
Respect for the medium.

What frustrated me most about the original mobile blog experience wasn’t just that it was unreadable. It’s that it had been left that way. It didn’t feel like anyone cared enough to ask: is this comfortable to read? And when something is hard to read, it might as well not exist.

All that effort from our content team? Ghosted by a UI that didn’t care to carry it well. This wasn’t just a design oversight. It was a failure of storytelling. And that’s what finally pushed me to fix it—not because I had the time, but because I was tired of watching good writing go unseen.

So I made the effort to bring typographic care to Flutter and React. I recreated line heights. I tuned font sizes. I gave margins the room they deserved. I stopped treating HTML as data and started treating it as literature. It still isn’t perfect. I’m still tweaking line spacing and wondering if 1.5 is too loose or just right. But that’s the work. You keep adjusting the margins until the story breathes again.

The Deeper Lesson

Interfaces are not neutral.
The way you present content changes the way it’s perceived.

This wasn’t just about making it “pretty.” It was about making it possible to engage. Because no matter how good your ideas are, if your reader has to pinch, squint, and scroll sideways to reach them… they won’t.

And honestly? Neither would I.