diff --git a/draftlogs/7043_add.md b/draftlogs/7043_add.md new file mode 100644 index 00000000000..83449d4c667 --- /dev/null +++ b/draftlogs/7043_add.md @@ -0,0 +1 @@ + - Introduce "" and "" pseudo html tags to underline and strike-through SVG text elements [[#7043](https://github.com/plotly/plotly.js/pull/7043)] diff --git a/src/components/annotations/attributes.js b/src/components/annotations/attributes.js index 074b7e0b562..617267cb352 100644 --- a/src/components/annotations/attributes.js +++ b/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 (
), bold (), italics (),', - 'hyperlinks (). Tags , , ', + 'hyperlinks (). Tags , , , , ', ' are also supported.' ].join(' ') }, diff --git a/src/components/fx/hover.js b/src/components/fx/hover.js index 6739142c4e4..84914ee1842 100644 --- a/src/components/fx/hover.js +++ b/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'] }); } diff --git a/src/lib/svg_text_utils.js b/src/lib/svg_text_utils.js index 338c34897e1..2c5ddc7f1d9 100644 --- a/src/lib/svg_text_utils.js +++ b/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', diff --git a/test/image/baselines/pie_title_middle_center_multiline.png b/test/image/baselines/pie_title_middle_center_multiline.png index 6cb8fc4943b..7e0b0e799e4 100644 Binary files a/test/image/baselines/pie_title_middle_center_multiline.png and b/test/image/baselines/pie_title_middle_center_multiline.png differ diff --git a/test/image/mocks/pie_title_middle_center_multiline.json b/test/image/mocks/pie_title_middle_center_multiline.json index 4a9e423109a..0aa4cdf8869 100644 --- a/test/image/mocks/pie_title_middle_center_multiline.json +++ b/test/image/mocks/pie_title_middle_center_multiline.json @@ -2,7 +2,7 @@ "data": [ { "values": [955, 405, 360, 310, 295], - "labels": ["Mandarin", "Spanish", "English", "Hindi", "Arabic"], + "labels": ["Mandarin", "Spanish", "English", "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 10 5 languages by number of native speakers (2009 2010, est.)" }, "height": 600, "width": 600 diff --git a/test/plot-schema.json b/test/plot-schema.json index 0663c4b7e67..2f2cecd273c 100644 --- a/test/plot-schema.json +++ b/test/plot-schema.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 (
), bold (), italics (), hyperlinks (). Tags , , are also supported.", + "description": "Sets the text associated with this annotation. Plotly uses a subset of HTML tags to do things like newline (
), bold (), italics (), hyperlinks (). Tags , , , , 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 (
), bold (), italics (), hyperlinks (). Tags , , are also supported.", + "description": "Sets the text associated with this annotation. Plotly uses a subset of HTML tags to do things like newline (
), bold (), italics (), hyperlinks (). Tags , , , , are also supported.", "editType": "calc", "valType": "string" },