# Cuentas en columna como las escribe cada país
> Una ficha de cálculo cuyas cuentas son líneas - 864 : 4 del Markdown, cifra a cifra en casillas, con la división como la hacen las escuelas de cada país.
- Versión HTML: https://postext.dev/es/cookbook/column-arithmetic-by-country
- Receta N.º 170 · Libros de texto · Nivel 3 (Avanzado) · Salidas: Canvas, PDF, Controles en vivo
- Géneros: Cuadernos y ejercicios, Libros de texto
- Requiere postext ≥ 1.59.0, postext-pdf ≥ 1.59.0 · probada con 1.59.0, postext-pdf 1.59.0 el 2026-10-24
- Páginas: [1](https://postext.dev/cookbook/column-arithmetic-by-country/es/p01.webp?v=745a9023), [2](https://postext.dev/cookbook/column-arithmetic-by-country/es/p02.webp?v=745a9023), [1](https://postext.dev/cookbook/column-arithmetic-by-country/es/p03.webp?v=745a9023), [2](https://postext.dev/cookbook/column-arithmetic-by-country/es/p04.webp?v=745a9023)
- PDF: https://postext.dev/cookbook/column-arithmetic-by-country/es/column-arithmetic-by-country.pdf?v=745a9023
- Abrir en el Sandbox: https://postext.dev/es/sandbox#recipe=column-arithmetic-by-country&lang=es (.postext: https://postext.dev/cookbook/column-arithmetic-by-country/es/column-arithmetic-by-country.postext)
- Última actualización: 2026-10-24
- Otros idiomas: [en](https://postext.dev/en/cookbook/column-arithmetic-by-country.md), [ca](https://postext.dev/ca/cookbook/column-arithmetic-by-country.md), [de](https://postext.dev/de/cookbook/column-arithmetic-by-country.md), [fr](https://postext.dev/fr/cookbook/column-arithmetic-by-country.md), [it](https://postext.dev/it/cookbook/column-arithmetic-by-country.md), [pt](https://postext.dev/pt/cookbook/column-arithmetic-by-country.md), [zh](https://postext.dev/zh/cookbook/column-arithmetic-by-country.md), [ja](https://postext.dev/ja/cookbook/column-arithmetic-by-country.md), [ar](https://postext.dev/ar/cookbook/column-arithmetic-by-country.md)
## En pocas palabras
Una página de cuentas para niños de nueve años en español, inglés, francés y alemán. Cada país escribe la división a su manera y la ficha lo sigue; un interruptor muestra la copia del profesor con todas las respuestas.
## Lo que vas a componer
La unidad 3 de un cuaderno de cálculo de 4.º de Primaria, *Las cuatro operaciones*, en cuatro ediciones. Una fila de cálculo mental en tres columnas; sumas, restas y multiplicaciones escritas con una cifra por casilla y una fila de casillas para el resultado; divisiones y un problema en cuadrícula. En la división se separan las ediciones: la española y la francesa ponen el divisor en una caja a la derecha del dividendo y el cociente debajo; la inglesa lo deja fuera del signo ⟌, la «casita», con el cociente encima; la alemana escribe `864 : 4 =` en una línea con sitio debajo para los pasos, y sus productos con un punto. La coma o el punto decimal del cálculo mental sigue también al idioma. Un interruptor sobre las páginas convierte la ficha del alumno en la copia del profesor, con cada respuesta en naranja en su casilla.
**Esta receta responde a:**
- ¿Cómo compongo la división tal como la escriben las escuelas de cada país?
- ¿Cómo saco la edición del profesor, con las respuestas impresas en su sitio, del mismo libro del alumno?
## La respuesta corta
```js
// script.js, líneas 26–42
// `- 864 : 4` in the Markdown is one operation; the style sets it digit by digit in squares
// of 7.2 mm, a cell for each figure of the answer. Long division follows the country: the
// divisor in an L right of the dividend in Spain and France (potence), `864 : 4 =` on one
// line in Germany, the bracket ⟌ in English-speaking schools.
const calculo = {
id: 'calculo',
number: { shape: 'disc', background: col('accent'), fontFamily: LABEL, fontWeight: 700 },
instruction: { bold: true, color: col('ink') },
grid: { cell: mm(9), fontFamily: TEXT, fontSize: pt(15), rule: col('rule'),
color: col('ink') },
arithmetic: { columns: 4,
division: t({ es: 'potence', fr: 'potence', de: 'inline', en: 'bracket' }) },
blank: { look: 'box', width: em(3.2), color: col('rule'), weight: pt(0.8) },
area: { kind: 'grid', spacing: mm(5), color: col('rule'), weight: pt(0.4) },
answers: { color: col('accent'), fontFamily: LABEL }, // the teacher's copy, in the accent
marginTop: mm(7), marginBottom: mm(2), itemSpacing: em(0.5),
};
```
## Ingredientes
**Enseña**
- [Operaciones en columna](https://postext.dev/es/docs/exercises.md#operaciones-en-vertical): Operaciones en columna (+ − ×) con una casilla para cada cifra, y la división larga tal como la escriben las escuelas de cada idioma: la casita ⟌ inglesa, la caja de España, Francia e Italia o la alemana 864 : 4 = en línea.
- [Edición del profesor](https://postext.dev/es/docs/exercises.md#edición-del-profesor): exercises.edition: 'teacher' imprime cada respuesta en su sitio en un segundo color, rodea las opciones correctas y traza las líneas de unir: el libro del profesor a partir del texto del alumno.
- [Estilos de ejercicio](https://postext.dev/es/docs/exercises.md#estilos-de-ejercicio): exerciseStyles: cómo se imprime una familia de ejercicios: el número (disco, cuadrado, rótulo), el enunciado, las letras de las opciones, los huecos, las casillas de V/F, los puntos para unir, el banco de palabras, las zonas de escritura, las cuadrículas, los iconos de actividad y la dificultad.
**También usa**
- [Ejercicios](https://postext.dev/es/docs/exercises.md#ejercicios)
- [Huecos y bancos de palabras](https://postext.dev/es/docs/exercises.md#huecos-y-banco-de-palabras)
- [Preguntas abiertas y zonas de escritura](https://postext.dev/es/docs/exercises.md#preguntas-abiertas-y-espacio-para-escribir)
- [Aperturas diseñadas](https://postext.dev/es/docs/configuration-headings.md#apertura-a-toda-página-y-diseño-avanzado)
- [Atributos de título](https://postext.dev/es/docs/document-format.md#atributos-de-encabezado)
- [Paleta de color semántica](https://postext.dev/es/docs/configuration-fonts-colors-viewers.md#paleta-de-colores)
- [Separación silábica e idioma del documento](https://postext.dev/es/docs/justification.md#idiomas-admitidos)
- [Páginas en un canvas](https://postext.dev/es/docs/configuration-programmatic-usage.md#renderizar-una-página-como-mapa-de-bits)
- [Exportación a PDF](https://postext.dev/es/docs/configuration-pdf-output.md#generación-de-pdf)
- [Estilos de párrafo](https://postext.dev/es/docs/configuration-styles.md#estilos-de-párrafo)
- [Columnas en un recuadro o en el texto](https://postext.dev/es/docs/document-format-directives.md#columns)
- [Soluciones](https://postext.dev/es/docs/exercises.md#soluciones)
- [Fuentes incrustadas en el PDF](https://postext.dev/es/docs/configuration-pdf-output.md#por-qué-un-proveedor-de-fuentes)
**La configuración de un vistazo**
- [`bodyText`](https://postext.dev/es/docs/configuration-text.md#texto-base), [`colorPalette`](https://postext.dev/es/docs/configuration-fonts-colors-viewers.md#paleta-de-colores), `exerciseStyles`, `exercises`, [`footer`](https://postext.dev/es/docs/configuration-headers-footers.md#cabeceras-y-pies), [`header`](https://postext.dev/es/docs/configuration-headers-footers.md#cabeceras-y-pies), [`headings`](https://postext.dev/es/docs/configuration-headings.md#encabezados), [`layout`](https://postext.dev/es/docs/configuration-page-layout.md#disposición), [`locale`](https://postext.dev/es/docs/configuration-language.md#separación-silábica), [`orderedLists`](https://postext.dev/es/docs/configuration-lists-math.md#listas-ordenadas), [`page`](https://postext.dev/es/docs/configuration-page-layout.md#página), [`paragraphStyles`](https://postext.dev/es/docs/configuration-styles.md#estilos-de-párrafo)
**API**
- [`buildDocument`](https://postext.dev/es/docs/configuration-programmatic-usage.md#construir-un-documento), [`buildDocumentWithFonts`](https://postext.dev/es/docs/configuration-programmatic-usage.md#cargar-las-fuentes-antes-de-componer), [`decompressWoff2`](https://postext.dev/es/docs/configuration-pdf-output.md#proveedor-de-fuentes-en-el-navegador-fontsource--woff2), [`renderPageToCanvas`](https://postext.dev/es/docs/configuration-programmatic-usage.md#renderizar-una-página-como-mapa-de-bits), [`renderToPdf`](https://postext.dev/es/docs/configuration-pdf-output.md#generación-de-pdf)
**Tipografías**
- Fira Sans (OFL-1.1), Lexend (OFL-1.1)
## Elaboración
### 1 · Escribe las cuentas como líneas del Markdown
```js
// script.js, líneas 26–42
// `- 864 : 4` in the Markdown is one operation; the style sets it digit by digit in squares
// of 7.2 mm, a cell for each figure of the answer. Long division follows the country: the
// divisor in an L right of the dividend in Spain and France (potence), `864 : 4 =` on one
// line in Germany, the bracket ⟌ in English-speaking schools.
const calculo = {
id: 'calculo',
number: { shape: 'disc', background: col('accent'), fontFamily: LABEL, fontWeight: 700 },
instruction: { bold: true, color: col('ink') },
grid: { cell: mm(9), fontFamily: TEXT, fontSize: pt(15), rule: col('rule'),
color: col('ink') },
arithmetic: { columns: 4,
division: t({ es: 'potence', fr: 'potence', de: 'inline', en: 'bracket' }) },
blank: { look: 'box', width: em(3.2), color: col('rule'), weight: pt(0.8) },
area: { kind: 'grid', spacing: mm(5), color: col('rule'), weight: pt(0.4) },
answers: { color: col('accent'), fontFamily: LABEL }, // the teacher's copy, in the accent
marginTop: mm(7), marginBottom: mm(2), itemSpacing: em(0.5),
};
```
Un `:::exercise{type="arithmetic"}` lleva una operación por elemento de lista, `- 864 : 4`, con los signos que escribe su país (`:`, `÷`, `×`, `·`). El motor calcula el resultado, el cociente y el resto, y el estilo decide cómo se dibuja la cuenta: casillas de 7,2 mm y `arithmetic.division` elegida por edición con `t()`. La fila de cálculo mental es un ejercicio de huecos corriente cuya lista va en un grupo `:::columns{count=3}`, cada `[[70]]` una casilla del mismo ancho que las demás.
### 2 · Encabeza la ficha
```js
// script.js, líneas 46–67
const at = (to, edge, x = 0, y = 0, size) => ({ anchor: { to, edge },
offset: { x: mm(x), y: mm(y) }, ...(size && { size }) });
const field = (id, attr, x, width) => [
{ kind: 'text', id, content: `{attr.${attr}}`, fontFamily: LABEL, fontSize: pt(9.5),
fontWeight: 600, color: col('muted'), align: 'left',
placement: at('container', 'top-left', x, 26) },
{ kind: 'rule', id: `${id}-line`, direction: 'horizontal', thickness: pt(0.75),
color: col('rule'), placement: at('container', 'top-left', x + 17, 31, { width: mm(width) }) },
];
const head = { enabled: true, minHeight: mm(36), slot: { elements: [
{ kind: 'box', id: 'band', style: { backgroundColor: col('accent'), borderRadius: mm(3) },
placement: at('container', 'top-left', 0, 0, { width: 'fill', height: mm(19) }) },
{ kind: 'text', id: 'unit', content: '{attr.unidad}', fontFamily: LABEL, fontSize: pt(9),
fontWeight: 700, color: col('accent'), align: 'center', verticalAlign: 'middle',
textTransform: 'uppercase', letterSpacing: pt(1.2), lineHeight: 1.1,
box: { backgroundColor: col('paper'), borderRadius: mm(3.5) },
placement: at('container', 'top-left', 5, 5, { width: mm(26), height: mm(9) }) },
{ kind: 'text', id: 'title', content: '{titleText}', fontFamily: LABEL, fontSize: pt(21),
fontWeight: 700, color: col('paper'), align: 'left', lineHeight: 1.1,
placement: at('container', 'top-left', 37, 5.2) },
...field('name', 'nombre', 0, 100), ...field('date', 'fecha', 124, 38),
] } };
```
El título de nivel 1 de la unidad dibuja la banda naranja, la pastilla y el título, y los campos de nombre y fecha a partir de sus atributos (`nombre="Nombre" fecha="Fecha"`), así que cada edición los rotula en su idioma.
### 3 · Cambia entre la ficha del alumno y la copia del profesor
```js
// script.js, líneas 180–194
const form = document.getElementById('controls');
const labels = t({ es: ['Alumno', 'Profesor'], en: ['Pupil', 'Teacher'],
fr: ['Élève', 'Enseignant'], de: ['Schüler', 'Lehrkraft'] });
form.querySelectorAll('label span').forEach((span, k) => { span.textContent = labels[k]; });
function render() {
// The same config, edited in place: the next build sees the edition the form asks for.
config.exercises.edition = form.elements.edition.value;
const doc = buildDocument({ markdown }, config); // the faces are loaded by now
showPages(doc, { title });
document.querySelectorAll('#pt-actions a, [data-postext-pdf]').forEach((old) => old.remove());
offerPdf(() => renderToPdf(doc, { fontProvider: fontsourceProvider }),
`${RECIPE}-${LANG}-${config.exercises.edition}.pdf`);
}
form.addEventListener('change', render);
render();
```
`exercises.edition: 'teacher'` imprime cada respuesta en su sitio con el color de `answers.color`, aquí el de acento: las casillas del cálculo mental, las cifras de cada resultado, el cociente y el resto, la respuesta modelo del problema. El formulario sobre las páginas cambia la configuración en su sitio y vuelve a componer; las fuentes ya están cargadas, así que basta con `buildDocument`. La captura compone antes las dos fichas, de modo que las páginas publicadas muestran la del alumno y luego la del profesor.
## La receta completa
Los archivos de abajo se componen a partir de la carpeta de la receta, con el texto de ejemplo y el kit común del Recetario ya incluidos. Para ejecutarlos como una sola página, pon el HTML en ``, el CSS en un elemento ``);
document.body.insertAdjacentHTML('afterbegin',
'');
document.getElementById('pt-title').textContent = document.title || 'Postext';
addEventListener('error', (event) => kitFail(event.error ?? event.message));
addEventListener('unhandledrejection', (event) => kitFail(event.reason));
}
if (title) document.getElementById('pt-title').textContent = title;
return document.getElementById('pages')
?? document.body.appendChild(Object.assign(document.createElement('main'), { id: 'pages' }));
}
function kitStatus(text) {
viewer();
document.getElementById('pt-status').textContent = text;
}
function kitFail(error) {
document.documentElement.dataset.postext = 'error';
kitStatus(`Error: ${error?.message ?? error}`);
}
// ─── Kit · pdf v3 ── the same in every recipe that exports a PDF
/** The Fontsource files the screen used, as TrueType, with their range and
* place: the nearest weight the family ships in that style, upright with no italic;
* latin, then what its letters need (kitSubsetsFor). */
async function fontsourceProvider(family, weight, style, request) {
const id = fontsourceId(family);
const meta = await fontsourceMeta(family);
const s = style === 'italic' && meta && !meta.styles.includes('italic') ? 'normal' : style;
const shipped = meta ? await fontsourceWeights(family, s) : [];
const weights = shipped.length ? shipped : [400, 700];
const w = weights.reduce((a, b) => (Math.abs(b - weight) < Math.abs(a - weight) ? b : a));
const text = String.fromCodePoint(...(request?.codePoints ?? []));
const files = await Promise.all(['latin', ...kitSubsetsFor(text, meta)].map(async (subset, order) => {
const res = await fetch(`${await fontsourceAt(id)}files/${id}-${subset}-${w}-${s}.woff2`);
if (!res.ok) throw new Error(`Fontsource has no ${family} ${w} ${s} ${subset}`);
return Object.assign(await decompressWoff2(new Uint8Array(await res.arrayBuffer())),
{ unicodeRange: kitRanges()[subset], order });
}));
return files.length === 1 ? files[0] : files;
}
/** A "Build the PDF" button; then "Open the PDF" (a new tab: CodePen's frame
* shows no PDFs) and a download link. */
function offerPdf(makePdf, filename) {
viewer();
const button = Object.assign(document.createElement('button'), { type: 'button', textContent: 'Build the PDF' });
button.dataset.postextPdf = filename;
button.addEventListener('click', async () => {
button.disabled = true;
button.textContent = 'Building the PDF…';
try {
const bytes = await makePdf();
const url = URL.createObjectURL(new Blob([bytes], { type: 'application/pdf' }));
const size = `${Math.max(1, Math.round(bytes.length / 1024))} KB`;
button.replaceWith(
Object.assign(document.createElement('a'), { href: url, target: '_blank', rel: 'noopener', textContent: 'Open the PDF ↗' }),
Object.assign(document.createElement('a'), { href: url, download: filename, textContent: `Download ${filename} · ${size}` }));
} catch (error) {
button.disabled = false;
button.textContent = 'Build the PDF';
kitFail(error);
}
});
document.getElementById('pt-actions').append(button);
}
// ─── /Kit ───────────────────────────────────────────────────────────────────────
```
## Variantes
### Pon las soluciones boca abajo al pie
Una costumbre de los cuadernos de pasatiempos: la clave de cada ejercicio, girada 180° debajo de él.
```diff
- exercises: { edition: 'student' }, // the switch above the pages sets 'teacher'
+ exercises: { edition: 'student', solutions: { placement: 'inverted', layout: 'key' } },
```
### Divide con la casita en todas las ediciones
Las escuelas japonesas y chinas también usan la casita ⟌; un idioma que no aparece en la lista toma la suya propia.
```diff
- division: t({ es: 'potence', fr: 'potence', de: 'inline', en: 'bracket' }) },
+ division: 'bracket' },
```
## Errores frecuentes
- Las operaciones son de números enteros: una cuenta con decimales como `12,5 + 3,75` no se lee y se imprime tal cual. Deja los decimales en los huecos del cálculo mental, donde la respuesta es texto.
## Créditos
- Receta: Ignacio Ferro ([@drnachio](https://github.com/drnachio))
- Tipografías: Fira Sans (OFL-1.1), Lexend (OFL-1.1)
- Código: MIT · Contenido de ejemplo: CC-BY-4.0
## Relacionadas
- [N.º 168 · Unidad de un cuaderno de actividades de Primaria](https://postext.dev/es/cookbook/primary-workbook-activities.md): Una unidad de cuaderno de Ciencias con once actividades :::exercise que imprime un solo estilo: números en círculos, banco y puntos para unir. · Nivel 2 (Intermedio) · Cuadernos y ejercicios, Libros de texto
- [N.º 172 · Ejercicios japoneses con las soluciones del revés](https://postext.dev/es/cookbook/japanese-drill-upside-down-answers.md): Dos páginas de una serie de ejercicios japonesa, la de cuentas en horizontal y la de kanji en columnas, con las soluciones del revés bajo cada ejercicio. · Nivel 2 (Intermedio) · Cuadernos y ejercicios, Libros de texto
- [N.º 174 · Una página de pasatiempos con las soluciones del revés](https://postext.dev/es/cookbook/puzzle-page-upside-down-answers.md): La página de pasatiempos de una revista infantil: crucigrama, sopa de letras, adivinanza, historia que ordenar y más, en tarjetas con las soluciones del revés. · Nivel 2 (Intermedio) · Revistas y fanzines, Cuadernos y ejercicios