Layout & display

DiffView

What changed between two versions, one row per field. The kit draws the list, and working out what changed stays with the page.

Basic

Pass one entry per field that changed. Each row names its field and says what happened to it in a word, Added, Removed, Changed or Moved, so the kind of change never rests on color. A changed field shows its old value marked Removed above its new value marked Added. A move carries a sentence of your own, such as where the field went. A value emptied by the change reads "Empty".

Long values

A value longer than 400 characters shows its first 400 and a Show all button. The cut falls between two characters a reader sees as whole, so an emoji or an accented letter is never split. Each button names its value to a screen reader, as in "Show all of Body, added", so a list of them can be told apart. Every value folds again when the page passes other changes.

Direction and sameness

Every label and value takes its direction from its own text, so an Arabic or Hebrew value reads right to left inside a left-to-right page, and the other way round. With no changes the list says "These versions are the same."

API

DiffChange

A union on kind: an added, removed or moved field carries value, and a changed one carries before and after.