title: Pango Color Glyphs
body: <p>I am working on a project that uses the following technology to render text:</p>
  
  <ul>
  <li>Freetype - Glyph mapping</li>
  <li>Pango - Text Layout</li>
  <li>Skia - Drawing (font color and graphics for rest of system)</li>
  </ul>
  
  <p>We are now trying to add the ability to render colored emoji.  Right now it seems that Freetype added the support to specify color glyphs but we have been having issues getting Pango to layout colored font.  Is it even possible to render color emoji this way?  If we switched from Skia to Cairo would that help?</p>
  
  <p>Similarly, I have taken this small example <a href="https://developer.gnome.org/pango/stable/pango-Cairo-Rendering.html" rel="nofollow noreferrer">https://developer.gnome.org/pango/stable/pango-Cairo-Rendering.html</a> and tried to use emoji instead of text and I am not getting the glyph to show even though the font specified is "Apple Color Emoji".</p>
  
  <pre><code>#include &lt;math.h&gt;
  #include &lt;pango/pangocairo.h&gt;
  #include &lt;cairo.h&gt;
  
  static void
  draw_text (cairo_t *cr)
  {
  #define RADIUS 150
  #define N_WORDS 10
  #define FONT "Apple Color Emoji"
  
    PangoLayout *layout;
    PangoFontDescription *desc;
    int i;
  
    /* Center coordinates on the middle of the region we are drawing
     */
    cairo_translate (cr, RADIUS, RADIUS);
  
    /* Create a PangoLayout, set the font and text */
    layout = pango_cairo_create_layout (cr);
  
    pango_layout_set_text (layout, "", -1);
    desc = pango_font_description_from_string (FONT);
    pango_layout_set_font_description (layout, desc);
    pango_font_description_free (desc);
  
    /* Draw the layout N_WORDS times in a circle */
    for (i = 0; i &lt; N_WORDS; i++)
      {
        int width, height;
        double angle = (360. * i) / N_WORDS;
        double red;
  
        cairo_save (cr);
  
        /* Gradient from red at angle == 60 to blue at angle == 240 */
        red   = (1 + cos ((angle - 60) * G_PI / 180.)) / 2;
        cairo_set_source_rgb (cr, red, 0, 1.0 - red);
  
        cairo_rotate (cr, angle * G_PI / 180.);
  
        /* Inform Pango to re-layout the text with the new transformation */
        pango_cairo_update_layout (cr, layout);
  
        pango_layout_get_size (layout, &amp;width, &amp;height);
        cairo_move_to (cr, - ((double)width / PANGO_SCALE) / 2, - RADIUS);
        pango_cairo_show_layout (cr, layout);
  
        cairo_restore (cr);
      }
  
    /* free the layout object */
    g_object_unref (layout);
  }
  
  int main (int argc, char **argv)
  {
    cairo_t *cr;
    char *filename;
    cairo_status_t status;
    cairo_surface_t *surface;
  
  
    surface = cairo_image_surface_create (CAIRO_FORMAT_ARGB32,
                                          2 * RADIUS, 2 * RADIUS);
    cr = cairo_create (surface);
  
    cairo_set_source_rgb (cr, 1.0, 1.0, 1.0);
    cairo_paint (cr);
    draw_text (cr);
    cairo_destroy (cr);
  
    status = cairo_surface_write_to_png (surface, "/home/mikeobrien/emojiRendering/TESTFILE");
    cairo_surface_destroy (surface);
  
    if (status != CAIRO_STATUS_SUCCESS)
      {
        g_printerr ("Could not save png to '%s'\n", "/home/mikeobrien/emojiRendering/TESTFILE");
        return 1;
      }
  
  
    return 0;
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/TPCFT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TPCFT.png" alt="Yeilds this"></a></p>