AlignEd Career Report — Documentation

Documentation

How each report page is built, and exactly what to edit to plug in real student data.

1 Overview

Each report page is a single self-contained HTML file (e.g. 02 - AlignEd Cover Page.html). A page is built from two stacked layers inside one fixed A4 frame:

Background layer (.bg-svg) — all the graphics: shapes, colours, charts, icons, dividers. This is a vector SVG. You normally never touch this.
Text layer (the .abs divs) — every piece of editable text, positioned exactly on top of the graphics. This is what you edit.

Because text lives in real HTML (not baked into the image), you can change wording, plug in a student's name and scores, translate, or restyle — without any design tools.

2 Page anatomy

Open any page file and you'll see this skeleton:

NN - Page Title.html

<div class="page-container">        <!-- fixed A4 page, clips overflow -->
  <div class="page">                 <!-- rendered at 2x, scaled to 0.5 -->

    <!-- LAYER 1: graphics (do not edit) -->
    <div class="bg-svg">
      <svg ...> ... shapes, charts, icons ... </svg>
    </div>

    <!-- LAYER 2: editable text overlays -->
    <div class="abs" style="left:106px;top:1042px;...">John Doe</div>
    <div class="abs" style="left:106px;top:1102px;...">Class 10</div>
    ...
  </div>
</div>

Why 2x then scale 0.5? Browsers enforce a minimum font size; rendering at double size and scaling down to 0.5 lets tiny Figma fonts stay crisp and exact. You don't need to change anything for this to work.

3 Editing text

Every editable string is the content between a <div class="abs" ...> and its closing </div>. To change it, edit only that inner text — leave the style="..." alone (it holds the exact position, font and colour).

before

<div class="abs" style="...z-index:2">John Doe</div>

after

<div class="abs" style="...z-index:2">Priya Sharma</div>

Multi-line text

Use <br> for a line break inside a label, exactly as the generator does:

line break

<div class="abs" ...>Healthcare, Emergency &amp;<br>Medical Services (Ops)</div>

Tip: To find a value fast, use your editor's Find (Ctrl/Cmd + F) and search for the current text (e.g. John Doe).

4 Binding live data

The pages ship with placeholder data. To generate a real report, replace the placeholders with the student's values. The cover page placeholders, for example, are:

02 - AlignEd Cover Page.html

John Doe        → student full name
Class 10        → grade / class
Omega School    → institution name
10.04.2026      → report date

Automating it (developers)

Because each value is plain text inside a uniquely-positioned div, you can bind data programmatically. Two common options:

String replace — keep a copy with clear tokens and substitute server-side or in a script.
Add an id to the divs you need (e.g. id="student-name") and set textContent from JSON.

bind-example.js

// give the div an id once: <div id="student-name" class="abs" ...>
const data = { name: "Priya Sharma", grade: "Class 10" };
document.getElementById("student-name").textContent = data.name;

5 Colours & styles

Each overlay's look is controlled by inline CSS in its style attribute. The most useful properties:

color — text colour (hex, e.g. #242a34).
font-size / line-height — sizes are at 2x; the page scales to 0.5, so a 52px value shows as 26px.
font-weight — 400 (regular), 600/700 (bold).
left / top / width — exact position from Figma; change only to reposition.

Graphics colours (the coloured shapes/charts) live in the artwork (SVG) layer and are best left as-is so everything stays aligned. Contact us if you need the artwork changed.

6 Do & Don't

Do — edit the text between <div class="abs"> tags · change color on a text overlay · use <br> for line breaks · keep one report = one HTML file.

Don't — edit anything inside <div class="bg-svg"> · change the .page transform:scale(0.5) · remove the Google Fonts <link> in the head (text would fall back to a different font and shift).

7 Troubleshooting

Text looks like the wrong font

Ensure you're online (fonts load from Google Fonts) and the <link> in the page head is intact.

A label runs off its box

It likely needs a line break — insert <br> where it should wrap.

Text shifted after editing

You probably changed a value inside style="...". Undo and edit only the text between the tags.