Rendering Long Division Like a School Notebook, One Digit at a Time

I want to tell you about a small engineering problem that turned into a whole project: how do you make a calculator that shows its work the way a teacher would write it on the board?

There is no shortage of calculators on the internet. Search for "long division calculator" and you'll get fifty sites that give you the answer. The answer, though, is the least useful part for a kid who is learning. A 9-year-old doing division homework doesn't need to know that 847 ÷ 6 = 141.16. They need to know where each digit goes, when to bring down, how the remainder works — the choreography of the procedure.

That was the seed of Calculadora Alicia (https://calculadoraalicia.app): a free calculator built for Spanish-speaking primary school kids (ages 6–12) that draws every step the way it would look in their school notebook.

Why Spanish, why kids

Most step-by-step math tools are built in English, for English speakers. The explanations, the terminology, the little helper texts — all of it assumes the reader thinks in English. Spanish is the second most spoken language in the world, and millions of kids do their homework in it. "Carry," "borrow," "quotient" have exact Spanish equivalents (llevadas, pedir prestado, cociente), and getting the terminology right matters when a kid is trying to match what's on screen with what their teacher wrote in class.

So the tool is Spanish-first, not translated after the fact. Every explanation, every label, every teacher guide is written in Spanish from the start.

The hard part: digit-perfect diagrams

The actual engineering challenge wasn't the arithmetic — that's straightforward. It was the rendering.

A long division drawn by hand in a notebook has a very specific layout: the divisor sits to the left, the dividend tucks under a right-angle bracket, the quotient perches on top, and each partial subtraction stacks neatly with digits aligned to their columns. If a digit lands one column off, the whole thing looks wrong — and worse, it teaches the wrong thing.

So each operation type got its own layout engine: long division, fraction operations with simplification steps, prime factorization trees, square roots via the classical method, order of operations evaluated one reduction at a time. The rule I set for myself: if a screenshot of the output doesn't look like something a teacher would accept in a notebook, it's a bug.

That standard forced a testing habit I didn't expect to need. The math logic runs under an automated test suite (60+ tests and counting) that checks not just final results but intermediate steps — because a wrong step in a teaching tool is worse than a wrong answer. A wrong answer gets corrected. A wrong step gets memorized.

What it grew into

It started as one calculator. It's now twelve interactive tools: the main step-by-step calculator, fractions, percentages, rule of three, MCM and MCD (LCM and GCD), prime factorization, square roots, unit conversion, multiplication tables, combined operations with an interactive order-of-operations evaluator, and a worksheet generator that produces printable practice sheets with answer keys for teachers.

There are also thirty-five written guides on topics like two-digit division, the division check (la prueba de la división), and subtracting with borrowing. Each one reads like a patient explanation, not a textbook dump.

Technically, the whole site is a static Astro build with a React + TypeScript calculator at its heart. Pages are 40–65 KB and load in under a second, which matters more than you'd think — a lot of these kids are on shared family phones or school connections that don't forgive bloat.

Why free, and what "free" means here

It's free with no registration. That's a deliberate choice, not a growth hack. The audience is kids and teachers; a sign-up wall in front of a homework tool is a failure mode, not a feature.

I'll be honest about the tradeoffs: it's a website, not an app, and there's no offline mode. The scope is deliberately primary-school math — if you're looking for symbolic algebra or graphing, this isn't it. I'd rather do one level well than five levels badly.

If you're building for learners

The lesson I'd share with other developers: when your audience is learning, your UI is pedagogy. Every alignment choice, every label, every animation is teaching something, whether you meant it to or not. Test your intermediate steps the way you'd test your outputs. And if you're serving a language community that's usually an afterthought, build in their language first.

You can try it at https://calculadoraalicia.app — no account, no install, just open it and divide something.

Calculadora Alicia