Fossil SCM

fossil-scm / www / css / diff.md
Source Blame History 112 lines
9e33074… drh 1 Notes On Diff Formatting
9e33074… drh 2 ========================
9e33074… drh 3
9e33074… drh 4 There are two main kinds of diff display for the web interface:
9e33074… drh 5 unified and side-by-side. Both displays are implemented using
9e33074… drh 6 a <table>. The unified diff is a 4-column table, and the
9e33074… drh 7 side-by-side diff is a 5-column table. In a page like /info that
9e33074… drh 8 might show multiple file diffs, each file diff is in a separate
9e33074… drh 9 <table>. For side-by-side diffs, a small amount of Javascript
9e33074… drh 10 code is used to resize the text columns so that they fill the screen
9e33074… drh 11 width and to keep horizontal scrollbars in sync.
9e33074… drh 12
9e33074… drh 13 For the unified diff, the basic structure
9e33074… drh 14 is like this:
9e33074… drh 15
9e33074… drh 16 > ~~~~
9e33074… drh 17 <table class='diff udiff'>
9e33074… drh 18 <tr>
9e33074… drh 19 <td class='diffln difflnl'><pre>
9e33074… drh 20 Line numbers for the left-hand file
9e33074… drh 21 </pre></td>
9e33074… drh 22 <td class='diffln difflnr'><pre>
9e33074… drh 23 Line numbers for the right-hand file
9e33074… drh 24 </pre></td>
9e33074… drh 25 <td class='diffsep'><pre>
9e33074… drh 26 Change marks. "+" or "=" or nothing
9e33074… drh 27 </pre></td>
9e33074… drh 28 <td class='difftxt difftxtu'><pre>
9e33074… drh 29 The text
9e33074… drh 30 </pre></td>
9e33074… drh 31 </tr>
9e33074… drh 32 </table>
9e33074… drh 33 ~~~~
9e33074… drh 34
9e33074… drh 35 The structure for a side-by-side diff follows the
9e33074… drh 36 same basic pattern, though with 5 columns instead of
9e33074… drh 37 4, and slightly different class names:
9e33074… drh 38
9e33074… drh 39 > ~~~~
9e33074… drh 40 <table class='diff splitdiff'>
9e33074… drh 41 <tr>
9e33074… drh 42 <td class='diffln difflnl'><pre>
9e33074… drh 43 Line numbers for the left-hand file
9e33074… drh 44 </pre></td>
9e33074… drh 45 <td class='difftxt difftxtl'><pre>
9e33074… drh 46 The text for the left side
9e33074… drh 47 </pre></td>
9e33074… drh 48 <td class='diffsep'><pre>
9e33074… drh 49 Change marks. "+" or "=" or nothing
9e33074… drh 50 </pre></td>
9e33074… drh 51 <td class='diffln difflnr'><pre>
9e33074… drh 52 Line numbers for the right-hand file
9e33074… drh 53 </pre></td>
9e33074… drh 54 <td class='difftxt difftxtr'><pre>
9e33074… drh 55 The text on the right-hand side
9e33074… drh 56 </pre></td>
9e33074… drh 57 </tr>
9e33074… drh 58 </table>
9e33074… drh 59 ~~~~
9e33074… drh 60
9e33074… drh 61 The outer &lt;table&gt; always has class "diff". The "diffu" class
9e33074… drh 62 is added for unified diffs and the "splitdiff" class is added for
9e33074… drh 63 side-by-side diffs.
9e33074… drh 64
9e33074… drh 65 All line-number columns have the "diffln" class. They also always
9e33074… drh 66 have one of "difflnl" or "difflnr" depending on whether they hold
9e33074… drh 67 line numbers for the left or right files, respectively.
9e33074… drh 68
9e33074… drh 69 Text is always kept in a separate column so that it can be scraped
9e33074… drh 70 and copied by the user. All text columns have the "difftxt" class.
9e33074… drh 71 One additional class "difftxtu", "difftxtl", or "difftxtr" is added
9e33074… drh 72 depending on if the text is for a unified diff, the left column of
9e33074… drh 73 a side-by-side diff, or the right column of a side-by-side diff.
9e33074… drh 74
9e33074… drh 75 The content of all columns is a single &lt;pre&gt; that contains the
9e33074… drh 76 appropriate diff-text for that column. Scrolling is done on the
9e33074… drh 77 &lt;pre&gt; element.
9e33074… drh 78
9e33074… drh 79 Within text columns, highlighting is done with &lt;del&gt; and
9e33074… drh 80 &lt;ins&gt; markup. All text on a line that contains an isert or
9e33074… drh 81 delete is surrounded by &lt;ins&gt;...&lt;/ins&gt; or
9e33074… drh 82 &lt;del&gt;..&lt;/del&gt;. Within that line, specific characters
9e33074… drh 83 of text that specifically inserted deleted have an additional
9e33074… drh 84 layer of &lt;ins&gt; or &lt;del&gt; markup. Thus CSS like the
9e33074… drh 85 following is appropriate:
9e33074… drh 86
9e33074… drh 87 > ~~~~
9e33074… drh 88 td.difftxt ins {
9e33074… drh 89 background-color: #dafbe1; /* Light green for the whole line */
9e33074… drh 90 text-decoration: none;
9e33074… drh 91 }
9e33074… drh 92 td.difftxt ins > ins {
9e33074… drh 93 background-color: #a0e4b2; /* Dark green for specific characters that change */
9e33074… drh 94 text-decoration: none;
9e33074… drh 95 }
9e33074… drh 96 ~~~~
9e33074… drh 97
9e33074… drh 98 In a side-by-side diff, if an interior &lt;ins&gt; or &lt;del&gt; that mark
9e33074… drh 99 specific characters that change correspond to a delete/insert on the other
9e33074… drh 100 side, they they have the "edit" class tag. (ex: &lt;ins&nbsp;class='edit'&gt;
9e33074… drh 101 or &lt;del&nbsp;class='edit'&gt;). Some skins choose to paint these "modified"
9e33074… drh 102 regions blue:
9e33074… drh 103
9e33074… drh 104 > ~~~~
9e33074… drh 105 td.difftxt ins > ins.edit {
9e33074… drh 106 background-color: #c0c0ff; /* Blue for "modified" text region */
9e33074… drh 107 text-decoration: none;
9e33074… drh 108 }
9e33074… drh 109 ~~~~
9e33074… drh 110
9e33074… drh 111 Line number text also has &lt;ins&gt; and &lt;del&gt; tags for lines which
9e33074… drh 112 are pure insert or pure delete. But the tags do not nest for line numbers.

Keyboard Shortcuts

Open search /
Next entry (timeline) j
Previous entry (timeline) k
Open focused entry Enter
Show this help ?
Toggle theme Top nav button