Emoji baseline seems not currect #796

AielloChan · 2024-02-28T17:17:36Z

In browser 👇

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <canvas id="canvas" width="300px" height="300px"></canvas>
    <script>
      const canvas = document.getElementById('canvas');

      const ctx = canvas.getContext('2d');

      async function main() {
        ctx.font = '36px PingFang SC, Apple Color Emoji';
        ctx.fillText('Awesome👩‍👩‍👧‍👧!', 20, 100);
      }

      main();
    </script>
  </body>
</html>

in nodejs

import { join } from 'node:path';
import { promises } from 'node:fs';
import { SKRSContext2D, createCanvas } from '@napi-rs/canvas';

const canvas = createCanvas(300, 300);
const ctx: SKRSContext2D = canvas.getContext('2d');

async function main() {
  ctx.font = '36px PingFang SC, Apple Color Emoji';
  ctx.fillStyle = '#03a9f4';
  ctx.fillText('Awesome👩‍👩‍👧‍👧!', 20, 100);

  // export canvas as image
  const pngData = await canvas.encode('png');
  // encoding in libuv thread pool, non-blocking
  await promises.writeFile(join(__dirname, 'simple.png'), pngData);
}

main();

in skia web

https://fiddle.skia.org/c/57e193a61a79d6423da0dde8eb674d26

void draw(SkCanvas* canvas) {
    const char* fontFamily = nullptr;  // Default system family, if it exists.
    SkFontStyle fontStyle;  // Default is normal weight, normal width,  upright slant.

    sk_sp<SkTypeface> typeface = fontMgr->legacyMakeTypeface(fontFamily, fontStyle);

    SkFont font1(typeface, 32.0f, 1.0f, 0.0f);
    font1.setEdging(SkFont::Edging::kAntiAlias);

    // Note: MakeFromString may fail to produce expected results if the typeface
    // does not have glyphs for the characters in the string.  The characters
    // will not be kerned or shaped beyond a simple mapping from one Unicode
    // code point to one glyph with a default advance.
    sk_sp<SkTextBlob> blob1 = SkTextBlob::MakeFromString("Awesome😀!", font1);

    SkPaint paint1;

    paint1.setAntiAlias(true);
    paint1.setColor(SkColorSetARGB(0xFF, 0x42, 0x85, 0xF4));

    canvas->clear(SK_ColorWHITE);
    canvas->drawTextBlob(blob1.get(), 5.0f, 64.0f, paint1);
}

it seems emoji not vertical aligned, and cant make it currect

Brooooooklyn added bug Something isn't working help wanted Extra attention is needed labels Mar 4, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Emoji baseline seems not currect #796

Emoji baseline seems not currect #796

AielloChan commented Feb 28, 2024 •

edited

Emoji baseline seems not currect #796

Emoji baseline seems not currect #796

Comments

AielloChan commented Feb 28, 2024 • edited

AielloChan commented Feb 28, 2024 •

edited