Sorry, I should have explained better.

The guides are added as a linear-gradient background image to the "blob-code-inner" class elements. Note the differences in the following examples:

Correct = Regular (non-diff) code page - the guide is between the 8 and the 0, "r" and "a" in transparent and between the "n" and "o" in monospace as expected when compared to the code in Atom editor.
Init = initial commit diff - guide is really close to expacted at the "ruler", but is slightly off in the code that follows; see attempted explanation below the image.
Diff = Diff with expandable areas - expand the code after line 6, and you'll see that the guide is off by 10px to the left in the "rule" and about 10px to the right in the code that follows (non-expanded code); see attempted explanation below the image.

The "Init" and "Diff" have essentially the same HTML, except the "Diff" has expandable code blocks. GitHub adds an extra space, a "+" or "-" at the beginning of the code. Therefore the guides end up being shifted to the right by 1 character (12px font-size). The HTML for the code diff, is a table cell with a class of "blob-code" which adds a padding-left:10px to add extra space for the diff sign. Inside is a span with class "blob-code-inner" (where the guides are added):

<td class="blob-code blob-code-context">
  <button class="btn-link add-line-comment js-add-line-comment js-add-single-line-comment">
    <svg aria-hidden="true" class="octicon octicon-plus" height="16" version="1.1" viewBox="0 0 12 16" width="12">
      <path d="M12 9H7v5H5V9H0V7h5V2h2v5h5z"></path>
    </svg>
  </button>
  <span class="blob-code-inner">
    +<span class="pl-c">// code is here</span>
  </span>
</td>

When the code is expanded, the HTML looks like this:

<tr class="blob-expanded">
  ...
  <td class="blob-code blob-code-inner">
    <span class="pl-c">// code is here</span>
  </td>
</tr>

Again, the "blob-code" adds a padding-left of 10px, but the "blob-code-inner" class is on the td.

So logic dictates that the way to solve the misalignment would be to shift the guide by 10px to the right for the expanded code and shift the diff non-expanded code to the left by 1em (.75em appears to work better). I changed this function to do it:

function addGuides(vals) {
  let css = "",
    tddiff = "",
    spdiff = "";
  // to align the guides *after* the setting, we need to add 1, then add
  // another 0.1 to give the guide a tiny bit of white space to the left
  vals.forEach(guide => {
    let start = parseFloat(guide.chars) + 1.1;
    // eslint-disable-next-line one-var
    const size = parseFloat(guide.width) || 0.2,
      // each line needs to be at least 0.2ch in width to be visible
      end = (start + (size > 0.2 ? size : 0.2)).toFixed(1),
      color = guide.color || "rgba(0, 0, 0, .3)";
    start = start.toFixed(1);
    css += `transparent ${start}ch, ${color} ${start}ch, ${color} ${end}ch, transparent ${end}ch, `;
    tddiff += `transparent calc(${start}ch + 10px), ${color} calc(${start}ch + 10px), ${color} calc(${end}ch + 10px), transparent calc(${end}ch + 10px), `;
    spdiff += `transparent calc(${start}ch - .75em), ${color} calc(${start}ch - .75em), ${color} calc(${end}ch - .75em), transparent calc(${end}ch - .75em), `;
  });
  style.textContent = `
    span.blob-code-inner {
      font-family: "${font}", Consolas, "Liberation Mono", Menlo, Courier, monospace !important;
    }
    span.blob-code-inner, td.blob-code-inner:not(.blob-code-hunk) {
      display: block !important;
      background: linear-gradient(to right, transparent 0%, ${css} transparent 100%) !important;
    }
    .blob-expanded td.blob-code-inner:not(.blob-code-hunk) {
      background: linear-gradient(to right, transparent 0%, ${tddiff} transparent 100%) !important;
    }
    .diff-table span.blob-code-inner {
      background: linear-gradient(to right, transparent 0%, ${spdiff} transparent 100%) !important;
    }
  `;
}

And the guide appears to be much more accurate, but there is still a shift.

It is also possible to remove the 10px left padding from the expanded cell and not apply the -10px guide shift to the expanded rows to get the guide to line up better; but then the code indention is off.

It's been very frustrating trying to get everything to line up.

And to answer the last question... I use LICEcap for the animated screen capture (no lice are involved).

Uh oh!

Code guide vertical lines are broken by differing indentation #10

Description

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions