search

Yoast / wordpress-seo

Yoast SEO for WordPress
https://yoast.com/wordpress/plugins/seo/
Other
1.77k stars 891 forks source link

Text highlight functionality changes table format #6946

Closed monbauza closed 6 years ago

monbauza commented 7 years ago

What did you expect to happen?

When using the text highlight functionality (eye icon), the format of my post wouldn't change.

What happened instead?

When the eye icon is clicked, the table format changes (see image below).

image

This happens when the eye icon is clicked.

image

How can we reproduce this behavior?

  1. Create a new post with text content below
  2. Go to the readability tab in the Yoast metabox
  3. Click on the "more than 20 words" eye icon
  4. See that the format of the table changes

Example text

<p style="text-align: justify;">Today we continue on our anniversary gift lists with Wedding Anniversary Colours. We have covered traditional, modern and anniversary gemstones and gifts. Today we are looking at Anniversary Colours. Each year has its own colour of significance. Of course you can give an anniversary gift to your significant of your choosing as you know them best. Yet there is something about tradition and incorporating it with your gift gives it an extra layer of meaning.</p>

<h1 style="text-align: center;">Wedding Anniversary Colours</h1>
<table>
<tbody>
<tr>
<td style="color: white; font-weight: bold; text-decoration: none; font-family: Calibri; border-top: 0.5pt solid #da9694; border-bottom: 0.5pt solid #da9694; border-left: 0.5pt solid #da9694; background: #c0504d; text-align: center;">
<h6>Anniversary Year</h6>
</td>
<td style="color: white; font-weight: bold; text-decoration: none; font-family: Calibri; border-top: 0.5pt solid #da9694; border-right: 0.5pt solid #da9694; border-bottom: 0.5pt solid #da9694; border-left: none; background: #c0504d; text-align: center;">
<h6>Anniversary Colours</h6>
</td>
</tr>
<tr>
<td style="color: black; border-top: 0.5pt solid #da9694; border-bottom: 0.5pt solid #da9694; border-left: 0.5pt solid #da9694; background: #f2dcdb; text-align: center;">1st</td>
<td style="font-size: 11pt; color: black; border-top: 0.5pt solid #da9694; border-right: 0.5pt solid #da9694; border-bottom: 0.5pt solid #da9694; border-left: none; background: #f2dcdb; text-align: center;">Gold or Yellow</td>
</tr>
<tr>
<td style="color: black; border-top: 0.5pt solid #da9694; border-bottom: 0.5pt solid #da9694; border-left: 0.5pt solid #da9694; text-align: center;">2nd</td>
<td style="font-size: 11pt; color: black; border-top: 0.5pt solid #da9694; border-right: 0.5pt solid #da9694; border-bottom: 0.5pt solid #da9694; border-left: none; text-align: center;">Linen White</td>
</tr>
<tr>
<td style="color: black; border-top: 0.5pt solid #da9694; border-bottom: 0.5pt solid #da9694; border-left: 0.5pt solid #da9694; background: #f2dcdb; text-align: center;">3rd</td>
<td style="font-size: 11pt; color: black; border-top: 0.5pt solid #da9694; border-right: 0.5pt solid #da9694; border-bottom: 0.5pt solid #da9694; border-left: none; background: #f2dcdb; text-align: center;">Brown</td>
</tr>
<tr>
<td style="color: black; border-top: 0.5pt solid #da9694; border-bottom: 0.5pt solid #da9694; border-left: 0.5pt solid #da9694; text-align: center;">4th</td>
<td style="font-size: 11pt; color: black; border-top: 0.5pt solid #da9694; border-right: 0.5pt solid #da9694; border-bottom: 0.5pt solid #da9694; border-left: none; text-align: center;">Lime Green</td>
</tr>
<tr>
<td style="color: black; border-top: 0.5pt solid #da9694; border-bottom: 0.5pt solid #da9694; border-left: 0.5pt solid #da9694; background: #f2dcdb; text-align: center;">5th</td>
<td style="font-size: 11pt; color: black; border-top: 0.5pt solid #da9694; border-right: 0.5pt solid #da9694; border-bottom: 0.5pt solid #da9694; border-left: none; background: #f2dcdb; text-align: center;">Turquoise</td>
</tr>
<tr>
<td style="color: black; border-top: 0.5pt solid #da9694; border-bottom: 0.5pt solid #da9694; border-left: 0.5pt solid #da9694; text-align: center;">6th</td>
<td style="font-size: 11pt; color: black; border-top: 0.5pt solid #da9694; border-right: 0.5pt solid #da9694; border-bottom: 0.5pt solid #da9694; border-left: none; text-align: center;">White</td>
</tr>
<tr>
<td style="color: black; border-top: 0.5pt solid #da9694; border-bottom: 0.5pt solid #da9694; border-left: 0.5pt solid #da9694; background: #f2dcdb; text-align: center;">7th</td>
<td style="font-size: 11pt; color: black; border-top: 0.5pt solid #da9694; border-right: 0.5pt solid #da9694; border-bottom: 0.5pt solid #da9694; border-left: none; background: #f2dcdb; text-align: center;">Off White</td>
</tr>
<tr>
<td style="color: black; border-top: 0.5pt solid #da9694; border-bottom: 0.5pt solid #da9694; border-left: 0.5pt solid #da9694; text-align: center;">8th</td>
<td style="font-size: 11pt; color: black; border-top: 0.5pt solid #da9694; border-right: 0.5pt solid #da9694; border-bottom: 0.5pt solid #da9694; border-left: none; text-align: center;">Bronze</td>
</tr>
<tr>
<td style="color: black; border-top: 0.5pt solid #da9694; border-bottom: 0.5pt solid #da9694; border-left: 0.5pt solid #da9694; background: #f2dcdb; text-align: center;">9th</td>
<td style="font-size: 11pt; color: black; border-top: 0.5pt solid #da9694; border-right: 0.5pt solid #da9694; border-bottom: 0.5pt solid #da9694; border-left: none; background: #f2dcdb; text-align: center;">Terracotta</td>
</tr>
<tr>
<td style="color: black; border-top: 0.5pt solid #da9694; border-bottom: 0.5pt solid #da9694; border-left: 0.5pt solid #da9694; text-align: center;">10th</td>
<td style="font-size: 11pt; color: black; border-top: 0.5pt solid #da9694; border-right: 0.5pt solid #da9694; border-bottom: 0.5pt solid #da9694; border-left: none; text-align: center;">Silver</td>
</tr>
<tr>
<td style="color: black; border-top: 0.5pt solid #da9694; border-bottom: 0.5pt solid #da9694; border-left: 0.5pt solid #da9694; background: #f2dcdb; text-align: center;">11th</td>
<td style="font-size: 11pt; color: black; border-top: 0.5pt solid #da9694; border-right: 0.5pt solid #da9694; border-bottom: 0.5pt solid #da9694; border-left: none; background: #f2dcdb; text-align: center;">Turquoise</td>
</tr>
<tr>
<td style="color: black; border-top: 0.5pt solid #da9694; border-bottom: 0.5pt solid #da9694; border-left: 0.5pt solid #da9694; text-align: center;">12th</td>
<td style="font-size: 11pt; color: black; border-top: 0.5pt solid #da9694; border-right: 0.5pt solid #da9694; border-bottom: 0.5pt solid #da9694; border-left: none; text-align: center;">Oyster White</td>
</tr>
<tr>
<td style="color: black; border-top: 0.5pt solid #da9694; border-bottom: 0.5pt solid #da9694; border-left: 0.5pt solid #da9694; background: #f2dcdb; text-align: center;">13th</td>
<td style="font-size: 11pt; color: black; border-top: 0.5pt solid #da9694; border-right: 0.5pt solid #da9694; border-bottom: 0.5pt solid #da9694; border-left: none; background: #f2dcdb; text-align: center;">Antique White</td>
</tr>
<tr>
<td style="color: black; border-top: 0.5pt solid #da9694; border-bottom: 0.5pt solid #da9694; border-left: 0.5pt solid #da9694; text-align: center;">14th</td>
<td style="font-size: 11pt; color: black; border-top: 0.5pt solid #da9694; border-right: 0.5pt solid #da9694; border-bottom: 0.5pt solid #da9694; border-left: none; text-align: center;">Opal</td>
</tr>
<tr>
<td style="color: black; border-top: 0.5pt solid #da9694; border-bottom: 0.5pt solid #da9694; border-left: 0.5pt solid #da9694; background: #f2dcdb; text-align: center;">15th</td>
<td style="font-size: 11pt; color: black; border-top: 0.5pt solid #da9694; border-right: 0.5pt solid #da9694; border-bottom: 0.5pt solid #da9694; border-left: none; background: #f2dcdb; text-align: center;">Ivory</td>
</tr>
<tr>
<td style="color: black; border-top: 0.5pt solid #da9694; border-bottom: 0.5pt solid #da9694; border-left: 0.5pt solid #da9694; text-align: center;">16th</td>
<td style="font-size: 11pt; color: black; border-top: 0.5pt solid #da9694; border-right: 0.5pt solid #da9694; border-bottom: 0.5pt solid #da9694; border-left: none; text-align: center;">Red</td>
</tr>
<tr>
<td style="color: black; border-top: 0.5pt solid #da9694; border-bottom: 0.5pt solid #da9694; border-left: 0.5pt solid #da9694; background: #f2dcdb; text-align: center;">17th</td>
<td style="font-size: 11pt; color: black; border-top: 0.5pt solid #da9694; border-right: 0.5pt solid #da9694; border-bottom: 0.5pt solid #da9694; border-left: none; background: #f2dcdb; text-align: center;">Yellow</td>
</tr>
<tr>
<td style="color: black; border-top: 0.5pt solid #da9694; border-bottom: 0.5pt solid #da9694; border-left: 0.5pt solid #da9694; text-align: center;">18th</td>
<td style="font-size: 11pt; color: black; border-top: 0.5pt solid #da9694; border-right: 0.5pt solid #da9694; border-bottom: 0.5pt solid #da9694; border-left: none; text-align: center;">Blue</td>
</tr>
<tr>
<td style="color: black; border-top: 0.5pt solid #da9694; border-bottom: 0.5pt solid #da9694; border-left: 0.5pt solid #da9694; background: #f2dcdb; text-align: center;">19th</td>
<td style="font-size: 11pt; color: black; border-top: 0.5pt solid #da9694; border-right: 0.5pt solid #da9694; border-bottom: 0.5pt solid #da9694; border-left: none; background: #f2dcdb; text-align: center;">Bronze</td>
</tr>
<tr>
<td style="color: black; border-top: 0.5pt solid #da9694; border-bottom: 0.5pt solid #da9694; border-left: 0.5pt solid #da9694; text-align: center;">20<sup>th
</sup></td>
<td style="font-size: 11pt; color: black; border-top: 0.5pt solid #da9694; border-right: 0.5pt solid #da9694; border-bottom: 0.5pt solid #da9694; border-left: none; text-align: center;">Emerald Green or White</td>
</tr>
<tr>
<td style="color: black; border-top: 0.5pt solid #da9694; border-bottom: 0.5pt solid #da9694; border-left: 0.5pt solid #da9694; background: #f2dcdb; text-align: center;">21st</td>
<td style="font-size: 11pt; color: black; border-top: 0.5pt solid #da9694; border-right: 0.5pt solid #da9694; border-bottom: 0.5pt solid #da9694; border-left: none; background: #f2dcdb; text-align: center;">Orange</td>
</tr>
<tr>
<td style="color: black; border-top: 0.5pt solid #da9694; border-bottom: 0.5pt solid #da9694; border-left: 0.5pt solid #da9694; text-align: center;">22nd</td>
<td style="font-size: 11pt; color: black; border-top: 0.5pt solid #da9694; border-right: 0.5pt solid #da9694; border-bottom: 0.5pt solid #da9694; border-left: none; text-align: center;">Green</td>
</tr>
<tr>
<td style="color: black; border-top: 0.5pt solid #da9694; border-bottom: 0.5pt solid #da9694; border-left: 0.5pt solid #da9694; background: #f2dcdb; text-align: center;">23rd</td>
<td style="font-size: 11pt; color: black; border-top: 0.5pt solid #da9694; border-right: 0.5pt solid #da9694; border-bottom: 0.5pt solid #da9694; border-left: none; background: #f2dcdb; text-align: center;">Silver</td>
</tr>
<tr>
<td style="color: black; border-top: 0.5pt solid #da9694; border-bottom: 0.5pt solid #da9694; border-left: 0.5pt solid #da9694; text-align: center;">24th</td>
<td style="font-size: 11pt; color: black; border-top: 0.5pt solid #da9694; border-right: 0.5pt solid #da9694; border-bottom: 0.5pt solid #da9694; border-left: none; text-align: center;">Lavender</td>
</tr>
<tr>
<td style="color: black; border-top: 0.5pt solid #da9694; border-bottom: 0.5pt solid #da9694; border-left: 0.5pt solid #da9694; background: #f2dcdb; text-align: center;">25th</td>
<td style="font-size: 11pt; color: black; border-top: 0.5pt solid #da9694; border-right: 0.5pt solid #da9694; border-bottom: 0.5pt solid #da9694; border-left: none; background: #f2dcdb; text-align: center;">Silver</td>
</tr>
<tr>
<td style="color: black; border-top: 0.5pt solid #da9694; border-bottom: 0.5pt solid #da9694; border-left: 0.5pt solid #da9694; text-align: center;">30th</td>
<td style="font-size: 11pt; color: black; border-top: 0.5pt solid #da9694; border-right: 0.5pt solid #da9694; border-bottom: 0.5pt solid #da9694; border-left: none; text-align: center;">Green</td>
</tr>
<tr>
<td style="color: black; border-top: 0.5pt solid #da9694; border-bottom: 0.5pt solid #da9694; border-left: 0.5pt solid #da9694; background: #f2dcdb; text-align: center;">35th</td>
<td style="font-size: 11pt; color: black; border-top: 0.5pt solid #da9694; border-right: 0.5pt solid #da9694; border-bottom: 0.5pt solid #da9694; border-left: none; background: #f2dcdb; text-align: center;">Coral</td>
</tr>
<tr>
<td style="color: black; border-top: 0.5pt solid #da9694; border-bottom: 0.5pt solid #da9694; border-left: 0.5pt solid #da9694; text-align: center;">40th</td>
<td style="font-size: 11pt; color: black; border-top: 0.5pt solid #da9694; border-right: 0.5pt solid #da9694; border-bottom: 0.5pt solid #da9694; border-left: none; text-align: center;">Ruby Red</td>
</tr>
<tr>
<td style="color: black; border-top: 0.5pt solid #da9694; border-bottom: 0.5pt solid #da9694; border-left: 0.5pt solid #da9694; background: #f2dcdb; text-align: center;">45th</td>
<td style="font-size: 11pt; color: black; border-top: 0.5pt solid #da9694; border-right: 0.5pt solid #da9694; border-bottom: 0.5pt solid #da9694; border-left: none; background: #f2dcdb; text-align: center;">Sapphire Red</td>
</tr>
<tr>
<td style="color: black; border-top: 0.5pt solid #da9694; border-bottom: 0.5pt solid #da9694; border-left: 0.5pt solid #da9694; text-align: center;">50th</td>
<td style="font-size: 11pt; color: black; border-top: 0.5pt solid #da9694; border-right: 0.5pt solid #da9694; border-bottom: 0.5pt solid #da9694; border-left: none; text-align: center;">Gold</td>
</tr>
<tr>
<td style="color: black; border-top: 0.5pt solid #da9694; border-bottom: 0.5pt solid #da9694; border-left: 0.5pt solid #da9694; background: #f2dcdb; text-align: center;">55th</td>
<td style="font-size: 11pt; color: black; border-top: 0.5pt solid #da9694; border-right: 0.5pt solid #da9694; border-bottom: 0.5pt solid #da9694; border-left: none; background: #f2dcdb; text-align: center;">Emerald Green</td>
</tr>
<tr>
<td style="color: black; border-top: 0.5pt solid #da9694; border-bottom: 0.5pt solid #da9694; border-left: 0.5pt solid #da9694; text-align: center;">60th</td>
<td style="font-size: 11pt; color: black; border-top: 0.5pt solid #da9694; border-right: 0.5pt solid #da9694; border-bottom: 0.5pt solid #da9694; border-left: none; text-align: center;">Diamond White</td>
</tr>
<tr>
<td style="color: black; border-top: 0.5pt solid #da9694; border-bottom: 0.5pt solid #da9694; border-left: 0.5pt solid #da9694; background: #f2dcdb; text-align: center;">65th</td>
<td style="font-size: 11pt; color: black; border-top: 0.5pt solid #da9694; border-right: 0.5pt solid #da9694; border-bottom: 0.5pt solid #da9694; border-left: none; background: #f2dcdb; text-align: center;">Sky Blue</td>
</tr>
<tr>
<td style="color: black; border-top: 0.5pt solid #da9694; border-bottom: 0.5pt solid #da9694; border-left: 0.5pt solid #da9694; text-align: center;">70th</td>
<td style="font-size: 11pt; color: black; border-top: 0.5pt solid #da9694; border-right: 0.5pt solid #da9694; border-bottom: 0.5pt solid #da9694; border-left: none; text-align: center;">Platinum</td>
</tr>
<tr>
<td style="color: black; border-top: 0.5pt solid #da9694; border-bottom: 0.5pt solid #da9694; border-left: 0.5pt solid #da9694; background: #f2dcdb; text-align: center;">75th</td>
<td style="font-size: 11pt; color: black; border-top: 0.5pt solid #da9694; border-right: 0.5pt solid #da9694; border-bottom: 0.5pt solid #da9694; border-left: none; background: #f2dcdb; text-align: center;">Diamond White</td>
</tr>
</tbody>
</table>
<h6 style="text-align: justify;"><span style="color: #000080;"><strong>
</strong></span></h6>

Technical info

monbauza commented 7 years ago

Please inform the customer of conversation # 188876 when this conversation has been closed.

monbauza commented 7 years ago

Related https://github.com/Yoast/wordpress-seo/issues/6646#issuecomment-281121064

benvaassen commented 6 years ago

Unable to reproduce this issue with Yoast SEO 5.9.3. Therefore, I'm closing this issue.