Merge pull request #6956 from plotly/font-styles

Add "bold" `weight`, "italic" `style` and "small-caps" `variant` to fonts
plotly · Apr 23, 2024 · 901bf3e · 901bf3e
2 parents 8b67ed6 + 35a025a
commit 901bf3e
Show file tree

Hide file tree

Showing 115 changed files with 13,939 additions and 389 deletions.
diff --git a/draftlogs/6956_add.md b/draftlogs/6956_add.md
@@ -0,0 +1 @@
+ - Add "bold" weight, "italic" style and "small-caps" variant options to fonts [[#6956](https://github.com/plotly/plotly.js/pull/6956)]
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -95,7 +95,7 @@
     "d3-time-format": "^2.2.3",
     "fast-isnumeric": "^1.1.4",
     "gl-mat4": "^1.2.0",
-    "gl-text": "^1.3.1",
+    "gl-text": "^1.4.0",
     "has-hover": "^1.0.1",
     "has-passive-events": "^1.0.0",
     "is-mobile": "^4.0.0",

diff --git a/src/components/annotations/common_defaults.js b/src/components/annotations/common_defaults.js
@@ -58,11 +58,12 @@ module.exports = function handleAnnotationCommonDefaults(annIn, annOut, fullLayo
             Color.contrast(hoverBG)
         );
 
-        Lib.coerceFont(coerce, 'hoverlabel.font', {
-            family: globalHoverLabel.font.family,
-            size: globalHoverLabel.font.size,
-            color: globalHoverLabel.font.color || hoverBorder
-        });
+        var fontDflt = Lib.extendFlat({}, globalHoverLabel.font);
+        if(!fontDflt.color) {
+            fontDflt.color = hoverBorder;
+        }
+
+        Lib.coerceFont(coerce, 'hoverlabel.font', fontDflt);
     }
 
     coerce('captureevents', !!hoverText);

diff --git a/src/components/annotations/draw.js b/src/components/annotations/draw.js
@@ -195,7 +195,10 @@ function drawRaw(gd, options, index, subplotId, xa, ya) {
                 borderColor: hoverOptions.bordercolor,
                 fontFamily: hoverFont.family,
                 fontSize: hoverFont.size,
-                fontColor: hoverFont.color
+                fontColor: hoverFont.color,
+                fontWeight: hoverFont.weight,
+                fontStyle: hoverFont.style,
+                fontVariant: hoverFont.variant
             }, {
                 container: fullLayout._hoverlayer.node(),
                 outerContainer: fullLayout._paper.node(),

diff --git a/src/components/colorbar/defaults.js b/src/components/colorbar/defaults.js
@@ -125,6 +125,9 @@ module.exports = function colorbarDefaults(containerIn, containerOut, layout) {
 
     var tickFont = colorbarOut.showticklabels ? colorbarOut.tickfont : font;
     var dfltTitleFont = Lib.extendFlat({}, tickFont, {
+        weight: font.weight,
+        style: font.style,
+        variant: font.variant,
         color: font.color,
         size: Lib.bigFont(tickFont.size)
     });

diff --git a/src/components/drawing/index.js b/src/components/drawing/index.js
@@ -27,16 +27,23 @@ var drawing = module.exports = {};
 // styling functions for plot elements
 // -----------------------------------------------------
 
-drawing.font = function(s, family, size, color) {
-    // also allow the form font(s, {family, size, color})
+drawing.font = function(s, family, size, color, weight, style, variant) {
+    // also allow the form font(s, {family, size, color, weight, style, variant})
     if(Lib.isPlainObject(family)) {
+        variant = family.variant;
+        style = family.style;
+        weight = family.weight;
         color = family.color;
         size = family.size;
         family = family.family;
     }
     if(family) s.style('font-family', family);
     if(size + 1) s.style('font-size', size + 'px');
     if(color) s.call(Color.fill, color);
+
+    if(weight) s.style('font-weight', weight);
+    if(style) s.style('font-style', style);
+    if(variant) s.style('font-variant', variant);
 };
 
 /*
@@ -1126,10 +1133,14 @@ drawing.textPointStyle = function(s, trace, gd) {
             selectedTextColorFn(d) :
             (d.tc || trace.textfont.color);
 
-        p.call(drawing.font,
-                d.tf || trace.textfont.family,
-                fontSize,
-                fontColor)
+        p.call(drawing.font, {
+            family: d.tf || trace.textfont.family,
+            weight: d.tw || trace.textfont.weight,
+            style: d.ty || trace.textfont.style,
+            variant: d.tv || trace.textfont.variant,
+            size: fontSize,
+            color: fontColor
+        })
             .text(text)
             .call(svgTextUtils.convertToTspans, gd)
             .call(textPointPosition, pos, fontSize, d.mrc);

diff --git a/src/components/fx/calc.js b/src/components/fx/calc.js
@@ -35,6 +35,9 @@ module.exports = function calc(gd) {
         fillFn(trace.hoverlabel.font.size, cd, 'hts');
         fillFn(trace.hoverlabel.font.color, cd, 'htc');
         fillFn(trace.hoverlabel.font.family, cd, 'htf');
+        fillFn(trace.hoverlabel.font.weight, cd, 'htw');
+        fillFn(trace.hoverlabel.font.style, cd, 'hty');
+        fillFn(trace.hoverlabel.font.variant, cd, 'htv');
         fillFn(trace.hoverlabel.namelength, cd, 'hnl');
         fillFn(trace.hoverlabel.align, cd, 'hta');
     }

diff --git a/src/components/fx/hover.js b/src/components/fx/hover.js
@@ -193,6 +193,9 @@ exports.loneHover = function loneHover(hoverItems, opts) {
             fontFamily: hoverItem.fontFamily,
             fontSize: hoverItem.fontSize,
             fontColor: hoverItem.fontColor,
+            fontWeight: hoverItem.fontWeight,
+            fontStyle: hoverItem.fontStyle,
+            fontVariant: hoverItem.fontVariant,
             nameLength: hoverItem.nameLength,
             textAlign: hoverItem.textAlign,
 
@@ -955,6 +958,9 @@ function createHoverText(hoverData, opts) {
     // can override this.
     var fontFamily = opts.fontFamily || constants.HOVERFONT;
     var fontSize = opts.fontSize || constants.HOVERFONTSIZE;
+    var fontWeight = opts.fontWeight || fullLayout.font.weight;
+    var fontStyle = opts.fontStyle || fullLayout.font.style;
+    var fontVariant = opts.fontVariant || fullLayout.font.variant;
 
     var c0 = hoverData[0];
     var xa = c0.xa;
@@ -1036,6 +1042,9 @@ function createHoverText(hoverData, opts) {
         var commonStroke = commonLabelOpts.bordercolor || Color.contrast(commonBgColor);
         var contrastColor = Color.contrast(commonBgColor);
         var commonLabelFont = {
+            weight: commonLabelOpts.font.weight || fontWeight,
+            style: commonLabelOpts.font.style || fontStyle,
+            variant: commonLabelOpts.font.variant || fontVariant,
             family: commonLabelOpts.font.family || fontFamily,
             size: commonLabelOpts.font.size || fontSize,
             color: commonLabelOpts.font.color || contrastColor
@@ -1357,7 +1366,13 @@ function createHoverText(hoverData, opts) {
             g.append('path')
                 .style('stroke-width', '1px');
             g.append('text').classed('nums', true)
-                .call(Drawing.font, fontFamily, fontSize);
+                .call(Drawing.font, {
+                    weight: fontWeight,
+                    style: fontStyle,
+                    variant: fontVariant,
+                    family: fontFamily,
+                    size: fontSize
+                });
         });
     hoverLabels.exit().remove();
 
@@ -1392,10 +1407,14 @@ function createHoverText(hoverData, opts) {
 
         // main label
         var tx = g.select('text.nums')
-            .call(Drawing.font,
-                d.fontFamily || fontFamily,
-                d.fontSize || fontSize,
-                d.fontColor || contrastColor)
+            .call(Drawing.font, {
+                family: d.fontFamily || fontFamily,
+                size: d.fontSize || fontSize,
+                color: d.fontColor || contrastColor,
+                weight: d.fontWeight || fontWeight,
+                style: d.fontStyle || fontStyle,
+                variant: d.fontVariant || fontVariant
+            })
             .text(text)
             .attr('data-notex', 1)
             .call(svgTextUtils.positionText, 0, 0)
@@ -1407,11 +1426,14 @@ function createHoverText(hoverData, opts) {
 
         // secondary label for non-empty 'name'
         if(name && name !== text) {
-            tx2.call(Drawing.font,
-                    d.fontFamily || fontFamily,
-                    d.fontSize || fontSize,
-                    nameColor)
-                .text(name)
+            tx2.call(Drawing.font, {
+                family: d.fontFamily || fontFamily,
+                size: d.fontSize || fontSize,
+                color: nameColor,
+                weight: d.fontWeight || fontWeight,
+                style: d.fontStyle || fontStyle,
+                variant: d.fontVariant || fontVariant
+            }).text(name)
                 .attr('data-notex', 1)
                 .call(svgTextUtils.positionText, 0, 0)
                 .call(svgTextUtils.convertToTspans, gd);
@@ -1954,6 +1976,9 @@ function cleanPoint(d, hovermode) {
     fill('fontFamily', 'htf', 'hoverlabel.font.family');
     fill('fontSize', 'hts', 'hoverlabel.font.size');
     fill('fontColor', 'htc', 'hoverlabel.font.color');
+    fill('fontWeight', 'htw', 'hoverlabel.font.weight');
+    fill('fontStyle', 'hty', 'hoverlabel.font.style');
+    fill('fontVariant', 'htv', 'hoverlabel.font.variant');
     fill('nameLength', 'hnl', 'hoverlabel.namelength');
     fill('textAlign', 'hta', 'hoverlabel.align');
 

diff --git a/src/components/fx/hoverlabel_defaults.js b/src/components/fx/hoverlabel_defaults.js
@@ -21,6 +21,9 @@ module.exports = function handleHoverLabelDefaults(contIn, contOut, coerce, opts
         inheritFontAttr('size');
         inheritFontAttr('family');
         inheritFontAttr('color');
+        inheritFontAttr('weight');
+        inheritFontAttr('style');
+        inheritFontAttr('variant');
 
         if(hasLegend) {
             if(!opts.bgcolor) opts.bgcolor = Color.combine(contOut.legend.bgcolor, contOut.paper_bgcolor);

diff --git a/src/components/legend/style.js b/src/components/legend/style.js
@@ -244,6 +244,9 @@ module.exports = function style(s, gd, legend) {
                 dEdit.ts = 10;
                 dEdit.tc = boundVal('textfont.color', pickFirst);
                 dEdit.tf = boundVal('textfont.family', pickFirst);
+                dEdit.tw = boundVal('textfont.weight', pickFirst);
+                dEdit.ty = boundVal('textfont.style', pickFirst);
+                dEdit.tv = boundVal('textfont.variant', pickFirst);
             }
 
             dMod = [Lib.minExtend(d0, dEdit)];

diff --git a/src/components/titles/index.js b/src/components/titles/index.js
@@ -68,6 +68,9 @@ function draw(gd, titleClass, options) {
     var fontFamily = font.family;
     var fontSize = font.size;
     var fontColor = font.color;
+    var fontWeight = font.weight;
+    var fontStyle = font.style;
+    var fontVariant = font.variant;
 
     // only make this title editable if we positively identify its property
     // as one that has editing enabled.
@@ -146,7 +149,9 @@ function draw(gd, titleClass, options) {
             'font-size': d3.round(fontSize, 2) + 'px',
             fill: Color.rgb(fontColor),
             opacity: opacity * Color.opacity(fontColor),
-            'font-weight': Plots.fontWeight
+            'font-weight': fontWeight,
+            'font-style': fontStyle,
+            'font-variant': fontVariant
         })
         .attr(attributes)
         .call(svgTextUtils.convertToTspans, gd);

diff --git a/src/lib/coerce.js b/src/lib/coerce.js
@@ -455,7 +455,9 @@ exports.coerce2 = function(containerIn, containerOut, attributes, attribute, dfl
  *
  * 'coerce' is a lib.coerce wrapper with implied first three arguments
  */
-exports.coerceFont = function(coerce, attr, dfltObj) {
+exports.coerceFont = function(coerce, attr, dfltObj, opts) {
+    if(!opts) opts = {};
+
     var out = {};
 
     dfltObj = dfltObj || {};
@@ -464,6 +466,10 @@ exports.coerceFont = function(coerce, attr, dfltObj) {
     out.size = coerce(attr + '.size', dfltObj.size);
     out.color = coerce(attr + '.color', dfltObj.color);
 
+    out.weight = coerce(attr + '.weight', dfltObj.weight);
+    out.style = coerce(attr + '.style', dfltObj.style);
+    if(!opts.noFontVariant) out.variant = coerce(attr + '.variant', dfltObj.variant);
+
     return out;
 };
 

diff --git a/src/plots/cartesian/axes.js b/src/plots/cartesian/axes.js
@@ -1737,6 +1737,9 @@ function tickTextObj(ax, x, text) {
         text: text || '',
         fontSize: tf.size,
         font: tf.family,
+        fontWeight: tf.weight,
+        fontStyle: tf.style,
+        fontVariant: tf.variant,
         fontColor: tf.color
     };
 }
@@ -3498,7 +3501,14 @@ axes.drawLabels = function(gd, ax, opts) {
 
                 thisLabel
                     .call(svgTextUtils.positionText, labelFns.xFn(d), labelFns.yFn(d))
-                    .call(Drawing.font, d.font, d.fontSize, d.fontColor)
+                    .call(Drawing.font, {
+                        family: d.font,
+                        size: d.fontSize,
+                        color: d.fontColor,
+                        weight: d.fontWeight,
+                        style: d.fontStyle,
+                        variant: d.fontVariant
+                    })
                     .text(d.text)
                     .call(svgTextUtils.convertToTspans, gd);
 

diff --git a/src/plots/cartesian/axis_defaults.js b/src/plots/cartesian/axis_defaults.js
@@ -113,6 +113,9 @@ module.exports = function handleAxisDefaults(containerIn, containerOut, coerce,
     coerce('title.text', dfltTitle);
     Lib.coerceFont(coerce, 'title.font', {
         family: font.family,
+        weight: font.weight,
+        style: font.style,
+        variant: font.variant,
         size: Lib.bigFont(font.size),
         color: dfltFontColor
     });

diff --git a/src/plots/cartesian/tick_label_defaults.js b/src/plots/cartesian/tick_label_defaults.js
@@ -28,6 +28,9 @@ module.exports = function handleTickLabelDefaults(containerIn, containerOut, coe
 
         Lib.coerceFont(coerce, 'tickfont', {
             family: font.family,
+            weight: font.weight,
+            style: font.style,
+            variant: font.variant,
             size: font.size,
             color: dfltFontColor
         });