Matcha Design Blog

QR Code Demystified - Part 2

Jason Brown - Tuesday, May 31, 2011

The next important thing we'll look at is the structure of a QR code. The below diagram shows names of the different sections of a QR symbol. Then I'll go over each one in more detail. Keep in mind that below if I mention one copy of something being the original and another a duplicate, it's just for the convenience of thinking about it that way - since the data is the same, it makes no difference which is placed first. Below I indicate what information is stored in the different sections, but I don't get into detail on how that information is encoded. I'll explain that in later weeks, and add in links as I complete the different sections.

Finder Pattern
The "finder" patterns are concentric squares of alternating colors lying in all corners of the symbol except the bottom right. They are used by decoders to identify the symbol as a QR Code, and to establish orientation. The center is a 3x3 black square and is surrounded by a one-thick white box, which is surrounded by a one-thick black box, making the full pattern 7x7 modules. The sides of the pattern not placed against the edges of the symbol are surrounded by one module of white space. Additionally, a single black module is located just to the right of the top-right corner of the white space around the bottom-left module (in other words, 8 modules in from the far left and 7 from the bottom).

Alignment Pattern
Used in symbols of version 2 and higher, the alignment patterns are placed to help decoders adjust for skewing in the symbol. Without them, it would be much harder for a decoder to be sure of how to convert a skewed photograph into the virtual grid of data it decodes. The alignment patterns are concentric squares like the finder patterns, but the center is a single black module. It's surrounded by a one-thick white box, which is surrounded by a one-thick black box, with no white space outside of that. Higher versions have more alignment patterns placed across the symbol. More details on that later.

Timing Pattern
An alternating stripe of black and white modules is located vertically and horizontally between the finder patterns. Starting with black on the innermost black corner of the finder patterns, the Timing Patterns alternate values toward the adjacent finder patterns. Therefore there are two lines to the timing pattern - one running horizontally between the two top finder patterns, and one running vertically between the two left-side finder patterns.

Format Data
The data in a QR symbol is masked by reversing modules in certain positions (more on that later.) In order for the decoder to know which modules to read as reversed, the selected mask is stored twice, along with the error correction version. After the format information is encoded to 15 bits, it's placed in the symbol twice. The first copy starts on the far left, directly beneath the white space around the top-left finder pattern. (Row 8, Column 0, zero-indexed) The first (highest-order) bit is placed in this position, and subsequent bits are placed to the right. The module of the timing pattern that is in the way is skipped over, two more bits are placed to the right, then the data "turns" the corner around the finder pattern's white space. The module from the other timing pattern is also skipped, and the remaining modules are placed vertically until the 15th bit (the lowest-order, or 1s place) is placed on the top row of the symbol. The second copy begins on the bottom just to the right of the white space around the bottom-left finder pattern. (Last Row, Column 8, zero-indexed) The bits are placed in order (highest- to lowest-order) upward alongside the white space until the black module by the corner of the finder pattern is reached. The bit that would otherwise go in that position is placed immediately below the bottom-left of the white space around the top-right finder pattern. (7th Column from last, Row 8, zero-indexed) Subsequent bits are placed to the right, with the final bit located in the last column.

Version Data
The version data simply indicates which version is being used. It takes 18 modules and is located against the top of the symbol, to the left of the top-right finder pattern. It is 3 modules wide and 6 modules high. A duplicate is placed against the left side of the symbol, just above the bottom-right finder pattern. It is 3 modules high and 6 modules wide. The encoding is mirrored diagonally along the NW to SE line. If building an encoder, it is possible to store the version data by placing the information by row and column in the original position and reversing the row and column numbers for the alternate. (assuming the top-left corner is [0,0]) In other words, what is located at module[x][y] in the original could be placed in module[y][x] for the duplicate.

Data and Error Correction
After the data is encoded (see part 3) an error correction algorithm is applied to ensure the symbol can be decoded even if part of it is obscured or smudged (see part 4). The encoded data and the error correction information are stored in the modules that aren't used by anything else mentioned above.

Mandatory Blank Space
The QR specification requires a space equal to the width of four modules all around the symbol to be blank, to prevent interference from the other things on the same surface. If text or images were located too closely to the symbol, they might be interpreted as part of the symbol itself. Although symbols can most often be read with less than a 4-module gap around them, following the specification exactly is never a bad idea.

If you found this post helpful or want to keep up with the future updates, share it using the links at the top and bottom of the post. In the coming weeks, we'll get into how the various parts of data are encoded, how much data can be stored in a symbol, how to apply the error correction, and more. At the end, I'll unveil the completed QR Code generator that kicked off this whole project. If you have any questions in the mean time, contact us on Twitter or Facebook. And be sure to Follow or Like us while you're at it!

About Matcha Design
Matcha Design is a full-service creative agency specializing in web design, print, identity, branding, interface design, video production, still photography and motion design. Using our passion for excellence, multi-cultural background, and award winning practices, we consistently provide high-quality, custom, innovative solutions to meet the diverse marketing needs of our clients. For more information, visit www.MatchaDesign.com.