Git Product home page Git Product logo

Comments (6)

13rac1 avatar 13rac1 commented on May 30, 2024

This is blocked by 13rac1/emojione-color-font#40

from twemoji-color-font.

DeeDeeG avatar DeeDeeG commented on May 30, 2024

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

from twemoji-color-font.

13rac1 avatar 13rac1 commented on May 30, 2024

The problem is described in detail in 13rac1/emojione-color-font#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.

from twemoji-color-font.

atoponce avatar atoponce commented on May 30, 2024

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

from twemoji-color-font.

imwsy avatar imwsy commented on May 30, 2024

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

from twemoji-color-font.

imwsy avatar imwsy commented on May 30, 2024

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"

from twemoji-color-font.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.