Fix caption munging for captions with html

oreilly/joins.html

@@ -501,7 +501,7 @@ y <- tribble(
 <div class="cell-output-display">
 
 <figure id="fig-join-setup"><p><img src="diagrams/join/setup.png" alt="x and y are two data frames with 2 columns and 3 rows, with contents as described in the text. The values of the keys are coloured: 1 is green, 2 is purple, 3 is orange, and 4 is yellow." width="160"/></p>
-<figcaption>Graphical representation of two simple tables. The coloured key columns map background colour to key value. The grey columns represent the “value” columns that are carried along for the ride.<code>key</code> columns map background colour to key value. The grey columns represent the “value” columns that are carried along for the ride.</figcaption>
+<figcaption>Graphical representation of two simple tables. The coloured <code>key</code> columns map background colour to key value. The grey columns represent the “value” columns that are carried along for the ride.</figcaption>
 </figure>
 </div>
 </div>
@@ -519,7 +519,7 @@ y &lt;- tribble(
 <div class="cell-output-display">
 
 <figure id="fig-join-inner"><p><img src="diagrams/join/inner.png" alt="x and y are placed at right-angles with lines forming a grid of potential matches. Keys 1 and 2 appear in both x and y, so we get a match, indicated by a dot. Each dot corresponds to a row in the output, so the resulting joined data frame has two rows." width="363"/></p>
-<figcaption>An inner join matches each row in x to the row in y that has the same value of key. Each match becomes a row in the output.<code>x</code> to the row in <code>y</code> that has the same value of <code>key</code>. Each match becomes a row in the output.</figcaption>
+<figcaption>An inner join matches each row in <code>x</code> to the row in <code>y</code> that has the same value of <code>key</code>. Each match becomes a row in the output.</figcaption>
 </figure>
 </div>
 </div>
@@ -530,7 +530,7 @@ y &lt;- tribble(
 <div class="cell-output-display">
 
 <figure id="fig-join-left"><p><img src="diagrams/join/left.png" alt="Compared to the previous diagram showing an inner join, the y table gets a new virtual row containin NA that will match any row in x that didn't otherwise match. This means that the output now has three rows. For key = 3, which matches this virtual row, val_y takes value NA." width="385"/></p>
-<figcaption>A visual representation of the left join where every row in x appears in the output.<code>x</code> appears in the output.</figcaption>
+<figcaption>A visual representation of the left join where every row in <code>x</code> appears in the output.</figcaption>
 </figure>
 </div>
 </div>
@@ -541,7 +541,7 @@ y &lt;- tribble(
 <div class="cell-output-display">
 
 <figure id="fig-join-right"><p><img src="diagrams/join/right.png" alt="Compared to the previous diagram showing an left join, the x table now gains a virtual row so that every row in y gets a match in x. val_x contains NA for the row in y that didn't match x." width="380"/></p>
-<figcaption>A visual representation of the right join where every row of y appears in the output.<code>y</code> appears in the output.</figcaption>
+<figcaption>A visual representation of the right join where every row of <code>y</code> appears in the output.</figcaption>
 </figure>
 </div>
 </div>
@@ -552,7 +552,7 @@ y &lt;- tribble(
 <div class="cell-output-display">
 
 <figure id="fig-join-full"><p><img src="diagrams/join/full.png" alt="Now both x and y have a virtual row that always matches. The result has 4 rows: keys 1, 2, 3, and 4 with all values from val_x and val_y, however key 2, val_y and key 4, val_x are NAs since those keys don't have a match in the other data frames." width="388"/></p>
-<figcaption>A visual representation of the full join where every row in x and y appears in the output.<code>x</code> and <code>y</code> appears in the output.</figcaption>
+<figcaption>A visual representation of the full join where every row in <code>x</code> and <code>y</code> appears in the output.</figcaption>
 </figure>
 </div>
 </div>
@@ -575,7 +575,7 @@ Row matching</h2>
 <div class="cell-output-display">
 
 <figure id="fig-join-match-types"><p><img src="diagrams/join/match-types.png" alt="A join diagram where x has key values 1, 2, and 3, and y has key values 1, 2, 2. The output has three rows because key 1 matches one row, key 2 matches two rows, and key 3 matches zero rows." width="348"/></p>
-<figcaption>The three ways a row in x can match. x1 matches one row in y, x2 matches two rows in y, x3 matches zero rows in y. Note that while there are three rows in x and three rows in the output, there isn’t a direct correspondence between the rows.<code>x</code> can match. <code>x1</code> matches one row in <code>y</code>, <code>x2</code> matches two rows in <code>y</code>, <code>x3</code> matches zero rows in y. Note that while there are three rows in <code>x</code> and three rows in the output, there isn’t a direct correspondence between the rows.</figcaption>
+<figcaption>The three ways a row in <code>x</code> can match. <code>x1</code> matches one row in <code>y</code>, <code>x2</code> matches two rows in <code>y</code>, <code>x3</code> matches zero rows in y. Note that while there are three rows in <code>x</code> and three rows in the output, there isn’t a direct correspondence between the rows.</figcaption>
 </figure>
 </div>
 </div>
@@ -684,7 +684,7 @@ Filtering joins</h2>
 <div class="cell-output-display">
 
 <figure id="fig-join-semi"><p><img src="diagrams/join/semi.png" alt="A join diagram with old friends x and y. In a semi join, only the presence of a match matters so the output contains the same columns as x." width="318"/></p>
-<figcaption>In a semi-join it only matters that there is a match; otherwise values in y don’t affect the output.<code>y</code> don’t affect the output.</figcaption>
+<figcaption>In a semi-join it only matters that there is a match; otherwise values in <code>y</code> don’t affect the output.</figcaption>
 </figure>
 </div>
 </div>
@@ -692,7 +692,7 @@ Filtering joins</h2>
 <div class="cell-output-display">
 
 <figure id="fig-join-anti"><p><img src="diagrams/join/anti.png" alt="An anti-join is the inverse of a semi-join so matches are drawn with red lines indicating that they will be dropped from the output." width="317"/></p>
-<figcaption>An anti-join is the inverse of a semi-join, dropping rows from x that have a match in y.<code>x</code> that have a match in <code>y</code>.</figcaption>
+<figcaption>An anti-join is the inverse of a semi-join, dropping rows from <code>x</code> that have a match in <code>y</code>.</figcaption>
 </figure>
 </div>
 </div>
@@ -717,7 +717,7 @@ Non-equi joins</h1>
 <div class="cell-output-display">
 
 <figure id="fig-inner-both"><p><img src="diagrams/join/inner-both.png" alt="A join diagram showing an inner join betwen x and y. The result now includes four columns: key.x, val_x, key.y, and val_y. The values of key.x and key.y are identical, which is why we usually only show one. " width="415"/></p>
-<figcaption>An left join showing both x and y keys in the output.<code>x</code> and <code>y</code> keys in the output.</figcaption>
+<figcaption>An left join showing both <code>x</code> and <code>y</code> keys in the output.</figcaption>
 </figure>
 </div>
 </div>
@@ -726,7 +726,7 @@ Non-equi joins</h1>
 <div class="cell-output-display">
 
 <figure id="fig-join-gte"><p><img src="diagrams/join/gte.png" alt="A join diagram illustrating join_by(key &gt;= key). The first row of x matches one row of y and the second and thirds rows each match two rows. This means the output has five rows containing each of the following (key.x, key.y) pairs: (1, 1), (2, 1), (2, 2), (3, 1), (3, 2)." width="385"/></p>
-<figcaption>A non-equi join where the x key must greater than or equal to than the y key. Many rows generate multiple matches.<code>x</code> key must greater than or equal to than the <code>y</code> key. Many rows generate multiple matches.</figcaption>
+<figcaption>A non-equi join where the <code>x</code> key must greater than or equal to than the <code>y</code> key. Many rows generate multiple matches.</figcaption>
 </figure>
 </div>
 </div>
@@ -749,7 +749,7 @@ Cross joins</h2>
 <div class="cell-output-display">
 
 <figure id="fig-join-cross"><p><img src="diagrams/join/cross.png" alt="A join diagram showing a dot for every combination of x and y." width="155"/></p>
-<figcaption>A cross join matches each row in x with every row in y.<code>x</code> with every row in <code>y</code>.</figcaption>
+<figcaption>A cross join matches each row in <code>x</code> with every row in <code>y</code>.</figcaption>
 </figure>
 </div>
 </div>
@@ -778,7 +778,7 @@ Inequality joins</h2>
 <div class="cell-output-display">
 
 <figure id="fig-join-lt"><p><img src="diagrams/join/lt.png" width="185"/></p>
-<figcaption>An inequality join where x is joined to y on rows where the key of x is less than the key of y. This makes a triangular shape in the top-left corner.<code>x</code> is joined to <code>y</code> on rows where the key of <code>x</code> is less than the key of <code>y</code>. This makes a triangular shape in the top-left corner.</figcaption>
+<figcaption>An inequality join where <code>x</code> is joined to <code>y</code> on rows where the key of <code>x</code> is less than the key of <code>y</code>. This makes a triangular shape in the top-left corner.</figcaption>
 </figure>
 </div>
 </div>