Cross-stitch chart size on Aida and seamless pattern tiles: the stitch arithmetic

An embroidery pattern lives two lives. On fabric it is a chart of stitches, and the question is how big it will be and how much cloth to cut. On a screen or in print it is a repeating tile, and the question is whether the repeat shows a seam and whether the stitches stay sharp. Both questions come down to the same thing: a pattern is a grid of whole stitches, and everything that keeps it right is arithmetic on that grid. This guide does that arithmetic for Aida and evenweave fabric, shows how to check that a tile really repeats without a seam, and how to put such a tile on a web page without blurring it. The Python and the CSS were run as printed.

#How big will it be on fabric?

Aida cloth is described by its count: the number of squares, and so of cross stitches, per inch. A 14-count Aida has 14 stitches to the inch, an 11-count has 11; typical counts run from 7 to 20. Evenweave and linen are counted in threads, and a cross is usually worked over two threads, so a 28-count evenweave stitched over two gives 14 stitches to the inch, the same size as 14-count Aida. The finished size is therefore the number of stitches divided by the count, in inches, times 2.54 for centimetres.

CM_PER_INCH = 2.54


def finished_cm(stitches: int, count: int) -> float:
    """Size of a design on fabric with `count` stitches per inch (14 count Aida = 14)."""
    return round(stitches / count * CM_PER_INCH, 1)


def fabric_cm(width: int, height: int, count: int, margin_cm: float = 5) -> tuple[float, float]:
    """The piece of fabric to cut: the design plus a margin on every side."""
    return (round(finished_cm(width, count) + 2 * margin_cm, 1),
            round(finished_cm(height, count) + 2 * margin_cm, 1))


def is_seamless(tile: list[str], draw) -> bool:
    """Draw the pattern on a canvas three tiles wide and high without wrapping, and compare
    its middle with the tile. `draw(width, height)` returns rows of the same characters."""
    h, w = len(tile), len(tile[0])
    big = draw(3 * w, 3 * h)
    middle = [row[w:2 * w] for row in big[h:2 * h]]
    return middle == tile

For a motif of 30 by 30 stitches the sample gives:

• 5.4 cm on 14-count Aida, 6.9 cm on 11-count, 4.8 cm on 16-count and 4.2 cm on 18-count;
• 5.4 cm on 28-count evenweave over two, as on 14-count Aida.

A tile of 52 by 26 stitches is 9.4 cm wide on 14-count and 12.0 cm on 11-count. With 5 cm of spare fabric on every side, enough to hold it in a hoop and to mount it later, the piece to cut is 19.4 by 14.7 cm on 14-count and 22.0 by 16.0 cm on 11-count. A border of 120 stitches is 21.8 cm long on 14-count, so before you start a border for a cushion or a sleeve, divide the length you need by the repeat to see how many repeats fit, and plan the corners or the join.

The margin is a choice, not a rule. A piece for a frame needs more than one for a bookmark; check with whoever will finish it. A finer count gives a smaller and more detailed piece, and a coarser one is easier on the eyes: the same chart can be a brooch or a cushion.

#Does the tile really repeat without a seam?

A repeating pattern is a tile whose motifs continue across its edges. The usual mistake is a tile whose width is not a multiple of the pattern's own rhythm: a diagonal lattice with a step of 6 stitches has to be 6, 12 or 18 stitches wide, or the lines break where two tiles meet. You will not always see it in a preview of one tile.

The reliable test does not look at the edges at all. Draw the pattern on a canvas three tiles wide and three tiles high, without any wrapping, and compare its middle tile with the tile you ship. If they are equal, every neighbour lines up, because the middle tile has real neighbours on all eight sides. That is what is_seamless() does. For the rhomb lattice with a step of 6, a tile of 12 by 12 stitches passes and a tile of 10 by 10 fails, which is exactly the seam you would otherwise find on a printed roll of wrapping paper.

The same test works for borders, which repeat only sideways: draw three repeats in a row and compare the middle one.

#Crisp tiles on a web page

A stitch pattern is made of squares, so on a screen it should have hard edges. Three settings keep them:

• Draw the SVG on a grid of whole units per stitch and set shape-rendering="crispEdges" on it, which asks the browser to favour sharp edges over anti-aliasing.
• Show the tile at a size that is a whole number of pixels per stitch. A tile of 30 stitches drawn at 4 units a stitch is 120 units wide, so 60, 120, 180 or 240 pixels give 2, 4, 6 or 8 pixels a stitch. At 100 pixels each stitch would be 3.33 pixels, and the edges would blur.
• For a PNG, show it at its own size or a whole multiple of it, and add image-rendering: pixelated, so that if it is scaled the browser keeps the hard edges instead of smoothing them.

/* A Kenarka tile of 30 x 30 stitches, drawn at 4 units a stitch: 120 x 120 in the SVG. */
.band {
  background-image: url("kenarka/svg/tiles/indigo/star-grid.svg");
  background-size: 120px 120px;      /* 4 px a stitch; 60px, 180px or 240px stay crisp too */
}

.band-png {
  background-image: url("kenarka/png/tiles/indigo/8px/star-grid.png");
  background-size: 240px 240px;      /* the PNG's own size: 8 px a stitch */
  image-rendering: pixelated;        /* if it is ever scaled, keep hard stitch edges */
}

We opened this in Chrome with two bands of 600 by 240 pixels: the SVG tile at 4 pixels a stitch and the PNG at 8, both repeating with no visible seam and with sharp stitches. For print, place the SVG as a pattern swatch at a whole number of stitches, or use a PNG rendered at a high number of pixels per stitch.

#Patterns drawn stitch by stitch

We made Kenarka, a set of seamless patterns, borders and motifs inspired by Bulgarian embroidery: eight-pointed stars, hooked rhombs, elbetitsa signs, ram's horns, flower crosses, nested rhombs and trees of life. It has 24 tiles, 12 borders and 28 single motifs in six colourways, as SVG with crisp edges, pixel-exact PNG at 4, 8 and 16 pixels a stitch, and a stitched look, plus 64 chart pages with symbols, a grid of tens, stitches per thread and the finished size on 14 and 11 count Aida. Every motif was drawn by code written for the set; none is a copy of a museum piece or a published chart. Its tests check, among other things, that every tile equals the middle of a 3 by 3 canvas drawn without wrapping, and that every thread colour has a contrast of at least 4:1 with its background. It has not yet been stitched on real fabric, it gives no thread brand numbers, and it is listed as Coming soon.

#Frequently asked questions

How do I work out the finished size of a cross-stitch chart?

Divide the number of stitches by the fabric count to get inches, and multiply by 2.54 for centimetres. 30 stitches on 14-count Aida are about 5.4 cm.

Is 28-count evenweave the same as 14-count Aida?

For size, yes, when each cross is worked over two threads: 28 threads to the inch give 14 stitches to the inch.

Why does my repeating pattern show a seam?

Usually because the tile is not a whole multiple of the pattern's repeat. Draw three by three tiles without wrapping and compare the middle one with your tile.

Why does my pixel pattern look blurry in the browser?

It is shown at a size that is not a whole number of pixels per stitch. Use whole multiples of the tile's stitch count, and image-rendering: pixelated for PNG files.

#Sources

• Wikipedia: Aida cloth
• Wikipedia: Cross-stitch
• MDN: background-size
• MDN: image-rendering
• MDN: shape-rendering