twemoji-color-font icon indicating copy to clipboard operation
twemoji-color-font copied to clipboard

Published 20 hours ago • verified publisher icon 13rac1

Create 1-9, #, * SVGs to make ligatures work

Open 13rac1 opened this issue 8 years ago • 6 comments

13rac1 avatar Apr 16 '16 16:04 13rac1

This is blocked by https://github.com/eosrei/emojione-color-font/issues/40

13rac1 avatar Jun 10 '16 23:06 13rac1

I have a repository where I worked on this problem, though without a description I wasn't sure what you needed. The glyphs at my repository are either the blank keycap, or the * # 1-9 with no background (but at the original size and position). Does this address the problem?

https://github.com/DeeDeeG/twitter-keycap-ligature-glyphs/tree/master/svg

DeeDeeG avatar Jan 30 '17 05:01 DeeDeeG

The problem is described in detail in https://github.com/eosrei/emojione-color-font/issues/40 The same issue would probably occur on Windows. There are two conflicting issues:

  1. The same font must be selected for all code points making up a ligature for the font's ligature to work.
  2. These characters already have representations 0-9#* in the default system fonts: sans and sans-serif.

The only way, AFAIK, to make these work (by default, as people will expect) is to put the ligatures in the default system sans and sans-serif fonts, not in the symbol/emoji fonts. This would require merging the ligatures into whatever the user's default fonts are on all three OS and that sounds like a headache.

13rac1 avatar Jan 30 '17 06:01 13rac1

Mozilla will be dumping EmojiOne as their font handling emoji in favor of this Twemoji font. Their current EmojiOne font also does not render 0-9*# ligatures, because as mentioned, they likely exist in default system fonts, and are being rendered prior to the browser font.

Also, when used as a web font with the CSS @font-face property and an explicitly declared font-family, is it possible to force the ligature rendering without system fonts getting in the way?

"EmojiOne Mozilla" font in Firefox with the same rendering bug:

sy

atoponce avatar Jun 08 '18 03:06 atoponce

image the location (https://getemoji.com/#symbols) of the keycaps emoji seems to be different from other emoji (9 and #)?

imwsy avatar Sep 27 '20 19:09 imwsy

here is my config file

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE fontconfig SYSTEM "fonts.dtd">
<!--
Twitter Color Emoji SVGinOT Font
Fontconfig fonts.conf for a Ubuntu default

Test with:
fc-match -s sans
fc-match -s serif
fc-match -s sans-serif
fc-match -s monospace
-->

<fontconfig>
  <rejectfont>
    <glob>/usr/share/fonts/noto/*</glob>
    <!--glob>/usr/share/fonts/noto-symbols/*</glob-->
    <glob>/usr/share/fonts/san-francisco/*</glob>
    <glob>/usr/share/fonts/noto-emoji/NotoEmoji-Regular.ttf</glob>
  </rejectfont>

  <!-- sans for testing -->
  <match target="font">
    <!-- If the requested font is Ubuntu -->
    <test name="family" compare="eq">
        <string>Ubuntu</string>
    </test>
    <!-- Replace the entire match list with Ubuntu alone -->
    <edit name="family" mode="assign_replace">
      <string>Ubuntu</string>
    </edit>
    <!-- Assign the serif family -->
    <edit name="family" mode="append_last">
      <string>sans</string>
    </edit>
  </match>

  <match>
    <!-- If the requested font is serif -->
    <test qual="any" name="family">
        <string>sans</string>
    </test>
    <!-- Make Ubuntu the first result -->
    <edit name="family" mode="prepend_first">
      <string>Ubuntu</string>
    </edit>
    <!-- Followed -->
    <edit name="family" mode="prepend">
      <string>Noto Color Emoji</string>
    </edit>
    <edit name="family" mode="prepend">
      <string>Noto Sans CJK SC</string>
    </edit>
  </match>
  <!-- sans for testing -->

  <!-- serif -->
  <match target="font">
    <!-- If the requested font is Ubuntu -->
    <test name="family" compare="eq">
        <string>Ubuntu</string>
    </test>
    <!-- Replace the entire match list with Ubuntu alone -->
    <edit name="family" mode="assign_replace">
      <string>Ubuntu</string>
    </edit>
    <!-- Assign the serif family -->
    <edit name="family" mode="append_last">
      <string>serif</string>
    </edit>
  </match>

  <match>
    <!-- If the requested font is serif -->
    <test qual="any" name="family">
        <string>serif</string>
    </test>
    <!-- Make Ubuntu the first result -->
    <edit name="family" mode="prepend_first">
      <string>Ubuntu</string>
    </edit>
    <!-- Followed -->
    <edit name="family" mode="prepend">
      <string>Noto Color Emoji</string>
    </edit>
    <edit name="family" mode="prepend">
      <string>Noto Serif CJK SC</string>
    </edit>
  </match>
  <!-- serif -->

  <!-- sans-serif -->
  <match target="font">
    <!-- If the requested font is Ubuntu -->
    <test name="family" compare="eq">
        <string>Ubuntu</string>
    </test>
    <!-- Replace the entire match list with Ubuntu alone -->
    <edit name="family" mode="assign_replace">
      <string>Ubuntu</string>
    </edit>
    <!-- Assign the sans-serif family -->
    <edit name="family" mode="append_last">
      <string>sans-serif</string>
    </edit>
  </match>

  <match>
    <!-- If the requested font is serif -->
    <test qual="any" name="family">
        <string>sans-serif</string>
    </test>
    <!-- Make Ubuntu the first result -->
    <edit name="family" mode="prepend_first">
      <string>Ubuntu</string>
    </edit>
    <!-- Followed-->
    <edit name="family" mode="prepend">
      <string>Noto Color Emoji</string>
    </edit>
    <edit name="family" mode="prepend">
      <string>Noto Sans CJK SC</string>
    </edit>
  </match>
  <!-- sans-serif -->

  <!-- monospace -->
  <match target="font">
    <!-- If the requested font is Ubuntu Mono -->
    <test name="family" compare="eq">
        <string>Ubuntu Mono</string>
    </test>
    <!-- Replace the entire match list with Ubuntu Mono alone -->
    <edit name="family" mode="assign_replace">
      <string>Ubuntu Mono</string>
    </edit>
    <!-- Assign the monospace family last -->
    <edit name="family" mode="append_last">
      <string>monospace</string>
    </edit>
  </match>

  <match target="pattern">
    <!-- If the requested font is monospace -->
    <test qual="any" name="family">
        <string>monospace</string>
    </test>
    <!-- Make Ubuntu Mono the first result -->
    <edit name="family" mode="prepend_first">
      <string>Ubuntu Mono</string>
    </edit>
    <!-- Followed-->
    <edit name="family" mode="prepend">
      <string>Noto Color Emoji</string>
    </edit>
    <edit name="family" mode="prepend">
      <string>Noto Sans Mono CJK SC</string>
    </edit>
  </match>
  <!-- monospace -->

  <!-- Add - generic family -->
  <alias binding="strong">
    <family>Noto Sans CJK HK</family>
    <default><family>Ubuntu</family></default>
  </alias>
  <alias binding="strong">
    <family>Noto Sans CJK JP</family>
    <default><family>Ubuntu</family></default>
  </alias>
  <alias binding="strong">
    <family>Noto Sans CJK KR</family>
    <default><family>Ubuntu</family></default>
  </alias>
  <alias binding="strong">
    <family>Noto Sans CJK SC</family>
    <default><family>Ubuntu</family></default>
  </alias>
  <alias binding="strong">
    <family>Noto Sans CJK TC</family>
    <default><family>Ubuntu</family></default>
  </alias>

  <!-- Add - generic family -->
  <alias binding="strong">
    <family>Noto Sans Mono CJK HK</family>
    <default><family>Ubuntu</family></default>
  </alias>
  <alias binding="strong">
    <family>Noto Sans Mono CJK JP</family>
    <default><family>Ubuntu</family></default>
  </alias>
  <alias binding="strong">
    <family>Noto Sans Mono CJK KR</family>
    <default><family>Ubuntu</family></default>
  </alias>
  <alias binding="strong">
    <family>Noto Sans Mono CJK SC</family>
    <default><family>Ubuntu</family></default>
  </alias>
  <alias binding="strong">
    <family>Noto Sans Mono CJK TC</family>
    <default><family>Ubuntu</family></default>
  </alias>

  <!-- Add - generic family -->
  <alias binding="strong">
    <family>Noto Serif CJK HK</family>
    <default><family>Ubuntu</family></default>
  </alias>
  <alias binding="strong">
    <family>Noto Serif CJK JP</family>
    <default><family>Ubuntu</family></default>
  </alias>
  <alias binding="strong">
    <family>Noto Serif CJK KR</family>
    <default><family>Ubuntu</family></default>
  </alias>
  <alias binding="strong">
    <family>Noto Serif CJK SC</family>
    <default><family>Ubuntu</family></default>
  </alias>
  <alias binding="strong">
    <family>Noto Serif CJK TC</family>
    <default><family>Ubuntu</family></default>
  </alias>

  <!-- Add emoji generic family -->
  <alias binding="strong">
    <family>emoji</family>
    <default><family>Twitter Color Emoji</family></default>
  </alias>

  <!-- Alias requests for the other emoji fonts otherwise it will be blank -->
  <alias binding="strong">
    <family>Apple Color Emoji</family>
    <prefer><family>Twitter Color Emoji</family></prefer>
    <default><family>sans-serif</family></default>
    <default><family>serif</family></default>
  </alias>
  <alias binding="strong">
    <family>Segoe UI Emoji</family>
    <prefer><family>Twitter Color Emoji</family></prefer>
    <default><family>sans-serif</family></default>
    <default><family>serif</family></default>
  </alias>
  <alias binding="strong">
    <family>Noto Color Emoji</family>
    <prefer><family>Twitter Color Emoji</family></prefer>
    <default><family>sans-serif</family></default>
    <default><family>serif</family></default>
  </alias>
</fontconfig>


gentoo /usr/share/fonts # fc-match -s sans
TwitterColorEmoji-SVGinOT.ttf: "Twitter Color Emoji" "Regular"
Ubuntu-R.ttf: "Ubuntu" "Regular"
NotoColorEmoji.ttf: "Noto Color Emoji" "Regular"
NotoSansCJK-Regular.ttc: "Noto Sans CJK SC" "Regular"
NotoSansSymbols2-Regular.ttf: "Noto Sans Symbols2" "Regular"
NotoSansSymbols-Regular.ttf: "Noto Sans Symbols" "Regular"
Anonymous Pro Minus.ttf: "Anonymous Pro Minus" "Regular"
UbuntuMono-R.ttf: "Ubuntu Mono" "Regular"
gentoo /usr/share/fonts # fc-match -s serif
TwitterColorEmoji-SVGinOT.ttf: "Twitter Color Emoji" "Regular"
Ubuntu-R.ttf: "Ubuntu" "Regular"
NotoColorEmoji.ttf: "Noto Color Emoji" "Regular"
NotoSerifCJK-Regular.ttc: "Noto Serif CJK SC" "Regular"
NotoSansSymbols2-Regular.ttf: "Noto Sans Symbols2" "Regular"
NotoSansCJK-Regular.ttc: "Noto Sans CJK JP" "Regular"
NotoSansSymbols-Regular.ttf: "Noto Sans Symbols" "Regular"
Anonymous Pro Minus.ttf: "Anonymous Pro Minus" "Regular"
UbuntuMono-R.ttf: "Ubuntu Mono" "Regular"
gentoo /usr/share/fonts # fc-match -s sans-serif
TwitterColorEmoji-SVGinOT.ttf: "Twitter Color Emoji" "Regular"
Ubuntu-R.ttf: "Ubuntu" "Regular"
NotoColorEmoji.ttf: "Noto Color Emoji" "Regular"
NotoSansCJK-Regular.ttc: "Noto Sans CJK SC" "Regular"
NotoSansSymbols2-Regular.ttf: "Noto Sans Symbols2" "Regular"
NotoSansSymbols-Regular.ttf: "Noto Sans Symbols" "Regular"
Anonymous Pro Minus.ttf: "Anonymous Pro Minus" "Regular"
UbuntuMono-R.ttf: "Ubuntu Mono" "Regular"
gentoo /usr/share/fonts # fc-match -s monospace
TwitterColorEmoji-SVGinOT.ttf: "Twitter Color Emoji" "Regular"
Ubuntu-R.ttf: "Ubuntu" "Regular"
UbuntuMono-R.ttf: "Ubuntu Mono" "Regular"
NotoColorEmoji.ttf: "Noto Color Emoji" "Regular"
NotoSansCJK-Regular.ttc: "Noto Sans Mono CJK SC" "Regular"
NotoSansSymbols2-Regular.ttf: "Noto Sans Symbols2" "Regular"
NotoSansSymbols-Regular.ttf: "Noto Sans Symbols" "Regular"
Anonymous Pro Minus.ttf: "Anonymous Pro Minus" "Regular"

imwsy avatar Sep 27 '20 19:09 imwsy