Merge pull request #7043 from plotly/partial-strikethrough-underline-text

Add '<s>' and '<u>' pseudo html options for strike-through and underlining SVG text

Author: archmoj

draftlogs/7043_add.md

@@ -0,0 +1 @@
+ - Introduce "<u>" and "<s>" pseudo html tags to underline and strike-through SVG text elements [[#7043](https://github.com/plotly/plotly.js/pull/7043)]

src/components/annotations/attributes.js

@@ -50,7 +50,7 @@ module.exports = templatedArray('annotation', {
             'Sets the text associated with this annotation.',
             'Plotly uses a subset of HTML tags to do things like',
             'newline (<br>), bold (<b></b>), italics (<i></i>),',
-            'hyperlinks (<a href=\'...\'></a>). Tags <em>, <sup>, <sub>',
+            'hyperlinks (<a href=\'...\'></a>). Tags <em>, <sup>, <sub>, <s>, <u>',
             '<span> are also supported.'
         ].join(' ')
     },

src/components/fx/hover.js

@@ -2273,7 +2273,7 @@ function spikesChanged(gd, oldspikepoints) {
 function plainText(s, len) {
     return svgTextUtils.plainText(s || '', {
         len: len,
-        allowedTags: ['br', 'sub', 'sup', 'b', 'i', 'em']
+        allowedTags: ['br', 'sub', 'sup', 'b', 'i', 'em', 's', 'u']
     });
 }
 

src/lib/svg_text_utils.js

@@ -330,6 +330,8 @@ var TAG_STYLES = {
     // baseline below
     sup: 'font-size:70%',
     sub: 'font-size:70%',
+    s: 'text-decoration:line-through',
+    u: 'text-decoration:underline',
     b: 'font-weight:bold',
     i: 'font-style:italic',
     a: 'cursor:pointer',

test/image/baselines/pie_title_middle_center_multiline.png

@@ -2,7 +2,7 @@
   "data": [
     {
       "values": [955, 405, 360, 310, 295],
-      "labels": ["Mandarin", "Spanish", "English", "Hindi", "Arabic"],
+      "labels": ["Mandarin", "Spanish", "<u>English</u>", "Hindi", "Arabic"],
       "textinfo": "label+percent",
       "hole": 0.4,
       "title":{
@@ -14,7 +14,7 @@
   ],
   "layout": {
     "title": {
-      "text": "Top 5 languages by number of native speakers (2010, est.)"
+      "text": "Top <s>10</s> 5 languages by number of <u>native</u> speakers (<s>2009</s> 2010, est.)"
     },
     "height": 600,
     "width": 600

test/image/mocks/pie_title_middle_center_multiline.json

@@ -1118,7 +1118,7 @@
        "valType": "string"
       },
       "text": {
-       "description": "Sets the text associated with this annotation. Plotly uses a subset of HTML tags to do things like newline (<br>), bold (<b></b>), italics (<i></i>), hyperlinks (<a href='...'></a>). Tags <em>, <sup>, <sub> <span> are also supported.",
+       "description": "Sets the text associated with this annotation. Plotly uses a subset of HTML tags to do things like newline (<br>), bold (<b></b>), italics (<i></i>), hyperlinks (<a href='...'></a>). Tags <em>, <sup>, <sub>, <s>, <u> <span> are also supported.",
        "editType": "calc+arraydraw",
        "valType": "string"
       },
@@ -6660,7 +6660,7 @@
         "valType": "string"
        },
        "text": {
-        "description": "Sets the text associated with this annotation. Plotly uses a subset of HTML tags to do things like newline (<br>), bold (<b></b>), italics (<i></i>), hyperlinks (<a href='...'></a>). Tags <em>, <sup>, <sub> <span> are also supported.",
+        "description": "Sets the text associated with this annotation. Plotly uses a subset of HTML tags to do things like newline (<br>), bold (<b></b>), italics (<i></i>), hyperlinks (<a href='...'></a>). Tags <em>, <sup>, <sub>, <s>, <u> <span> are also supported.",
         "editType": "calc",
         "valType": "string"
        },