Render different font variants with pango - WIP

Author: lulu-berlin

lib/context2d.js

@@ -86,6 +86,7 @@ var parseFont = exports.parseFont = function(str) {
  var font = {
  weight: parsedFont.weight,
  style: parsedFont.style,
+ variant: parsedFont.variant,
  size: size.value,
  unit: size.unit,
  family: parsedFont.family.join(',')
@@ -246,6 +247,7 @@ Context2d.prototype.__defineSetter__('font', function(val){
  this._setFont(
  font.weight
  , font.style
+ , font.variant
  , font.size
  , font.unit
  , font.family);

src/Canvas.cc

@@ -605,14 +605,17 @@ NAN_METHOD(Canvas::RegisterFont) {
  Local<String> family_prop = Nan::New<String>("family").ToLocalChecked();
  Local<String> weight_prop = Nan::New<String>("weight").ToLocalChecked();
  Local<String> style_prop = Nan::New<String>("style").ToLocalChecked();
+ Local<String> variant_props = Nan::New<String>("variant").ToLocalChecked();
 
  char *family = str_value(js_user_desc->Get(family_prop), NULL, false);
  char *weight = str_value(js_user_desc->Get(weight_prop), "normal", true);
  char *style = str_value(js_user_desc->Get(style_prop), "normal", false);
+ char *variant = str_value(js_user_desc->Get(variant_props), "normal", true);
 
- if (family && weight && style) {
+ if (family && weight && style && variant) {
  pango_font_description_set_weight(user_desc, Canvas::GetWeightFromCSSString(weight));
  pango_font_description_set_style(user_desc, Canvas::GetStyleFromCSSString(style));
+ pango_font_description_set_variant(user_desc, Canvas::GetVariantFromCSSString(variant));
  pango_font_description_set_family(user_desc, family);
 
  std::vector<FontFace>::iterator it = _font_face_list.begin();
@@ -644,6 +647,7 @@ NAN_METHOD(Canvas::RegisterFont) {
  g_free(family);
  g_free(weight);
  g_free(style);
+ g_free(variant);
 }
 
 /*
@@ -759,6 +763,28 @@ Canvas::GetWeightFromCSSString(const char *weight) {
  return w;
 }
 
+/*
+ * Get a PangoVariant from a CSS string ("normal", "small-caps", etc)
+ * Only "normal" and "small-caps" are supported.
+ */
+
+PangoVariant
+Canvas::GetVariantFromCSSString(const char *variant) {
+ PangoVariant v = PANGO_VARIANT_NORMAL;
+
+ if (strlen(variant) > 0) {
+ if (0 == strcmp("small-caps", variant) ||
+ 0 == strcmp("all-small-caps", variant) ||
+ 0 == strcmp("petite-caps", variant) ||
+ 0 == strcmp("all-petite-caps", variant) ||
+ 0 == strcmp("unicase", variant)) {
+ v = PANGO_VARIANT_SMALL_CAPS;
+ }
+ }
+
+ return v;
+}
+
 /*
  * Given a user description, return a description that will select the
  * font either from the system or @font-face

src/Canvas.h

@@ -88,6 +88,7 @@ class Canvas: public Nan::ObjectWrap {
  static int EIO_AfterToBuffer(eio_req *req);
 #endif
  static PangoWeight GetWeightFromCSSString(const char *weight);
+ static PangoVariant GetVariantFromCSSString(const char *variant);
  static PangoStyle GetStyleFromCSSString(const char *style);
  static PangoFontDescription *ResolveFontDescription(const PangoFontDescription *desc);
 

src/CanvasRenderingContext2d.cc

@@ -1795,6 +1795,7 @@ NAN_METHOD(Context2d::MoveTo) {
  * Set font:
  * - weight
  * - style
+ * - variant
  * - size
  * - unit
  * - family
@@ -1804,15 +1805,17 @@ NAN_METHOD(Context2d::SetFont) {
  // Ignore invalid args
  if (!info[0]->IsString()
  || !info[1]->IsString()
- || !info[2]->IsNumber()
- || !info[3]->IsString()
- || !info[4]->IsString()) return;
+ || !info[2]->IsString()
+ || !info[3]->IsNumber()
+ || !info[4]->IsString()
+ || !info[5]->IsString()) return;
 
  String::Utf8Value weight(info[0]);
  String::Utf8Value style(info[1]);
- double size = info[2]->NumberValue();
- String::Utf8Value unit(info[3]);
- String::Utf8Value family(info[4]);
+ String::Utf8Value variant(info[2]);
+ double size = info[3]->NumberValue();
+ String::Utf8Value unit(info[4]);
+ String::Utf8Value family(info[5]);
 
  Context2d *context = Nan::ObjectWrap::Unwrap<Context2d>(info.This());
 
@@ -1821,6 +1824,7 @@ NAN_METHOD(Context2d::SetFont) {
 
  pango_font_description_set_style(desc, Canvas::GetStyleFromCSSString(*style));
  pango_font_description_set_weight(desc, Canvas::GetWeightFromCSSString(*weight));
+ pango_font_description_set_variant(desc, Canvas::GetVariantFromCSSString(*variant));
 
  if (strlen(*family) > 0) pango_font_description_set_family(desc, *family);
 

test/canvas.test.js

@@ -28,47 +28,47 @@ describe('Canvas', function () {
  it('.parseFont()', function () {
  var tests = [
  '20px Arial'
- , { size: 20, unit: 'px', family: 'Arial' }
+ , { style: 'normal', variant: 'normal', weight: 'normal', size: 20, unit: 'px', family: 'Arial' }
  , '20pt Arial'
- , { size: 26.666666666666668, unit: 'pt', family: 'Arial' }
+ , { style: 'normal', variant: 'normal', weight: 'normal', size: 26.666666666666668, unit: 'pt', family: 'Arial' }
  , '20.5pt Arial'
- , { size: 27.333333333333332, unit: 'pt', family: 'Arial' }
+ , { style: 'normal', variant: 'normal', weight: 'normal', size: 27.333333333333332, unit: 'pt', family: 'Arial' }
  , '20% Arial'
- , { size: 20, unit: '%', family: 'Arial' }
+ , { style: 'normal', variant: 'normal', weight: 'normal', size: 20, unit: '%', family: 'Arial' }
  , '20mm Arial'
- , { size: 75.59055118110237, unit: 'mm', family: 'Arial' }
+ , { style: 'normal', variant: 'normal', weight: 'normal', size: 75.59055118110237, unit: 'mm', family: 'Arial' }
  , '20px serif'
- , { size: 20, unit: 'px', family: 'serif' }
+ , { style: 'normal', variant: 'normal', weight: 'normal', size: 20, unit: 'px', family: 'serif' }
  , '20px sans-serif'
- , { size: 20, unit: 'px', family: 'sans-serif' }
+ , { style: 'normal', variant: 'normal', weight: 'normal', size: 20, unit: 'px', family: 'sans-serif' }
  , '20px monospace'
- , { size: 20, unit: 'px', family: 'monospace' }
+ , { style: 'normal', variant: 'normal', weight: 'normal', size: 20, unit: 'px', family: 'monospace' }
  , '50px Arial, sans-serif'
- , { size: 50, unit: 'px', family: 'Arial,sans-serif' }
+ , { style: 'normal', variant: 'normal', weight: 'normal', size: 50, unit: 'px', family: 'Arial,sans-serif' }
  , 'bold italic 50px Arial, sans-serif'
- , { style: 'italic', weight: 'bold', size: 50, unit: 'px', family: 'Arial,sans-serif' }
+ , { style: 'italic', variant: 'normal', weight: 'bold', size: 50, unit: 'px', family: 'Arial,sans-serif' }
  , '50px Helvetica , Arial, sans-serif'
- , { size: 50, unit: 'px', family: 'Helvetica,Arial,sans-serif' }
+ , { style: 'normal', variant: 'normal', weight: 'normal', size: 50, unit: 'px', family: 'Helvetica,Arial,sans-serif' }
  , '50px "Helvetica Neue", sans-serif'
- , { size: 50, unit: 'px', family: 'Helvetica Neue,sans-serif' }
+ , { style: 'normal', variant: 'normal', weight: 'normal', size: 50, unit: 'px', family: 'Helvetica Neue,sans-serif' }
  , '50px "Helvetica Neue", "foo bar baz" , sans-serif'
- , { size: 50, unit: 'px', family: 'Helvetica Neue,foo bar baz,sans-serif' }
+ , { style: 'normal', variant: 'normal', weight: 'normal', size: 50, unit: 'px', family: 'Helvetica Neue,foo bar baz,sans-serif' }
  , "50px 'Helvetica Neue'"
- , { size: 50, unit: 'px', family: 'Helvetica Neue' }
+ , { style: 'normal', variant: 'normal', weight: 'normal', size: 50, unit: 'px', family: 'Helvetica Neue' }
  , 'italic 20px Arial'
- , { size: 20, unit: 'px', style: 'italic', family: 'Arial' }
+ , { style: 'italic', variant: 'normal', weight: 'normal', size: 20, unit: 'px', family: 'Arial' }
  , 'oblique 20px Arial'
- , { size: 20, unit: 'px', style: 'oblique', family: 'Arial' }
+ , { style: 'oblique', variant: 'normal', weight: 'normal', size: 20, unit: 'px', family: 'Arial' }
  , 'normal 20px Arial'
- , { size: 20, unit: 'px', style: 'normal', family: 'Arial' }
+ , { style: 'normal', variant: 'normal', weight: 'normal', size: 20, unit: 'px', family: 'Arial' }
  , '300 20px Arial'
- , { size: 20, unit: 'px', weight: '300', family: 'Arial' }
+ , { style: 'normal', variant: 'normal', weight: '300', size: 20, unit: 'px', family: 'Arial' }
  , '800 20px Arial'
- , { size: 20, unit: 'px', weight: '800', family: 'Arial' }
+ , { style: 'normal', variant: 'normal', weight: '800', size: 20, unit: 'px', family: 'Arial' }
  , 'bolder 20px Arial'
- , { size: 20, unit: 'px', weight: 'bolder', family: 'Arial' }
+ , { style: 'normal', variant: 'normal', weight: 'bolder', size: 20, unit: 'px', family: 'Arial' }
  , 'lighter 20px Arial'
- , { size: 20, unit: 'px', weight: 'lighter', family: 'Arial' }
+ , { style: 'normal', variant: 'normal', weight: 'lighter', size: 20, unit: 'px', family: 'Arial' }
  ];
 
  for (var i = 0, len = tests.length; i < len; ++i) {

test/public/tests.js

@@ -1011,6 +1011,18 @@ tests['font style variant weight size family'] = function (ctx) {
  ctx.fillText('normal normal normal 16px', 100, 100)
 }
 
+tests['small-caps'] = function (ctx) {
+ ctx.strokeStyle = '#666'
+ ctx.strokeRect(0, 0, 200, 200)
+ ctx.lineTo(0, 100)
+ ctx.lineTo(200, 100)
+ ctx.stroke()
+
+ ctx.font = 'small-caps 16px sans-serif'
+ ctx.textAlign = 'center'
+ ctx.fillText('small-caps', 100, 100)
+}
+
 tests['globalCompositeOperation source-over'] = function (ctx) {
  ctx.fillStyle = 'blue'
  ctx.fillRect(0, 0, 100, 100)