Merge pull request #6956 from plotly/font-styles

Add "bold" `weight`, "italic" `style` and "small-caps" `variant` to fonts

Author: archmoj

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)]

package-lock.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",

package.json

@@ -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);

src/components/annotations/common_defaults.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(),

src/components/annotations/draw.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)
     });

src/components/colorbar/defaults.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);

src/components/drawing/index.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');
     }

src/components/fx/calc.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');
 

src/components/fx/hover.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);