Beautiful CSS/HTML for Diffs

[Pat Brown]

Hi Everyone

I'm not a front end designer, so I was wondering if anyone could recommend the most visually appealing way to represent a diff result in CSS/HTML (see the kind of results that diff_prettyHtml function works on).

Would also be great to hear about websites that represent diffs well for Joe Average (Github does a decent job by using colours only).  I think the underline/strikeout is a little messy (understandable as it's only a specimen function).

Thanks!

[Pat Brown]

Thought I'd be more specific about visually appealing.  Keen to hear your views about:

- how to make the text in diff results as readable as possible (without detracting from the objective below);

- how to make insertions and deletions as understandable as possible;

- as a third consideration, how to make results nice to look at.

In short, the best HTML/CSS for a diff so that a viewer can derive maximum meaning with minimum thinking.

[Chris Clark]

Take a look at reviewboard diffs, it does the equivalent of underline/strikeout it handles it REALLY well there and much more easy to read that the github example.

For a quick example see http://reviews.reviewboard.org/r/3261/diff/#index_header

Chris

--
You received this message because you are subscribed to the Google Groups "Diff Match Patch" group.
To view this discussion on the web visit https://groups.google.com/d/msg/diff-match-patch/-/ZFpG-nxhB8oJ.
To post to this group, send email to diff-mat...@googlegroups.com.
To unsubscribe from this group, send email to diff-match-pat...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/diff-match-patch?hl=en.

[Pat Brown]

That's fantastic markup colouring.  Will using that.  Also like the insertion deletion indicators.  Thanks very much.  Still keen to hear about more examples!

To post to this group, send email to diff-match-patch@googlegroups.com.
To unsubscribe from this group, send email to diff-match-patch+unsubscribe@googlegroups.com.

[Patrick Burrows]

Scrivener does a good job of displaying revisions for non-programmers (it is software for writers.)

Here are a bunch of screenshots:

Google image search for "scrivener color coded edits"

Each subsequent revision gets a different color, the more you revise your document, the more colorful it becomes. 

As a programmer, I'm not really used to looking at revisions like this, but a lot of non-technical people really like it and seem to intuitively understand it.

To post to this group, send email to diff-mat...@googlegroups.com.
To unsubscribe from this group, send email to diff-match-pat...@googlegroups.com.