PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

load twemoji dynamically as colr or sbix; fix monospace

Browse source
This commit is contained in:
Matthew Hodgson 2019-05-22 02:31:24 +01:00
parent 8b9017891b
commit 4ae652e5c3
7 changed files with 117 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
res/css/_common.scss
View file

@ -34,6 +34,7 @@ body {
pre, code {
font-family: $monospace-font-family;
font-size: 100% ! important;
}
.error, .warning {

0
res/fonts/Twemoji_Mozilla/TwemojiMozilla.woff2 → res/fonts/Twemoji_Mozilla/TwemojiMozilla-colr.woff2
View file

BIN
res/fonts/Twemoji_Mozilla/TwemojiMozilla-sbix.woff2 Normal file
View file

Binary file not shown.

45
res/themes/light/css/_fonts.scss
View file

@ -33,23 +33,40 @@
src: url('$(res)/fonts/Nunito/Nunito-Bold.ttf') format('truetype');
}
/*
* Fira Mono
* Used for monospace copy, i.e. code
*/
/* latin-ext */
@font-face {
font-family: 'Fira Mono';
src: url('$(res)/fonts/Fira_Mono/FiraMono-Regular.ttf') format('truetype');
font-family: 'Inconsolata';
font-style: normal;
font-weight: 400;
font-style: normal;
src: local('Inconsolata Regular'), local('Inconsolata-Regular'), url('$(res)/fonts/Inconsolata/QldKNThLqRwH-OJ1UHjlKGlX5qhExfHwNJU.woff2') format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Fira Mono';
src: url('$(res)/fonts/Fira_Mono/FiraMono-Bold.ttf') format('truetype');
font-weight: 700;
font-family: 'Inconsolata';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('Inconsolata Regular'), local('Inconsolata-Regular'), url('$(res)/fonts/Inconsolata/QldKNThLqRwH-OJ1UHjlKGlZ5qhExfHw.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Inconsolata';
font-style: normal;
font-weight: 700;
font-display: swap;
src: local('Inconsolata Bold'), local('Inconsolata-Bold'), url('$(res)/fonts/Inconsolata/QldXNThLqRwH-OJ1UHjlKGHiw71n5_zaDpwm80E.woff2') format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Inconsolata';
font-style: normal;
font-weight: 700;
font-display: swap;
src: local('Inconsolata Bold'), local('Inconsolata-Bold'), url('$(res)/fonts/Inconsolata/QldXNThLqRwH-OJ1UHjlKGHiw71p5_zaDpwm.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* a COLR/CPAL version of Twemoji used for consistent cross-browser emoji
@ -57,7 +74,11 @@
* using the fix from https://github.com/mozilla/twemoji-colr/issues/50 to
* work on macOS
*/
/*
// except we now load it dynamically via FontManager to handle browsers
// which can't render COLR/CPAL still
@font-face {
font-family: "Twemoji Mozilla";
src: url('$(res)/fonts/Twemoji_Mozilla/TwemojiMozilla.woff2') format('woff2');
}
*/

4
res/themes/light/css/_light.scss
View file

@ -5,11 +5,11 @@
Arial empirically gets it right, hence prioritising Arial here. */
/* We fall through to Twemoji for emoji rather than falling through
to native Emoji fonts (if any) to ensure cross-browser consistency */
$font-family: Nunito, 'Twemoji Mozilla', Arial, Helvetica, Sans-Serif;
$font-family: Nunito, Twemoji, 'Apple Color Emoji', 'Noto Color Emoji', Arial, Helvetica, Sans-Serif;
// XXX: In theory this should be Fira, but it's a bit ugly.
// TODO: make it consistent cross-browser
$monospace-font-family: Consolas, 'Liberation Mono', Courier, 'Twemoji Mozilla', monospace;
$monospace-font-family: Inconsolata, Twemoji, 'Apple Color Emoji', 'Noto Color Emoji', Courier, monospace;
// unified palette
// try to use these colors when possible

3
src/components/structures/LoggedInView.js
View file

@ -24,6 +24,7 @@ import { DragDropContext } from 'react-beautiful-dnd';
import { KeyCode, isOnlyCtrlOrCmdKeyEvent } from '../../Keyboard';
import PageTypes from '../../PageTypes';
import CallMediaHandler from '../../CallMediaHandler';
import { fixupColorFonts } from '../../utils/FontManager';
import sdk from '../../index';
import dis from '../../dispatcher';
import sessionStore from '../../stores/SessionStore';
@ -118,6 +119,8 @@ const LoggedInView = React.createClass({
this._matrixClient.on("accountData", this.onAccountData);
this._matrixClient.on("sync", this.onSync);
this._matrixClient.on("RoomState.events", this.onRoomStateEvents);
fixupColorFonts();
},
componentDidUpdate(prevProps) {

78
src/utils/FontManager.js Normal file
View file

@ -0,0 +1,78 @@
/*
Copyright 2019 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
/*
* Based on...
* ChromaCheck 1.16
* author Roel Nieskens, https://pixelambacht.nl
* MIT license
*/
let colrFontSupported = undefined;
async function isColrFontSupported() {
if (colrFontSupported !== undefined) {
return colrFontSupported;
}
try {
let canvas = document.createElement('canvas');
let context = canvas.getContext('2d');
let img = new Image();
let fontCOLR = 'd09GRgABAAAAAAKAAAwAAAAAAowAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABDT0xSAAACVAAAABYAAAAYAAIAJUNQQUwAAAJsAAAAEgAAABLJAAAQT1MvMgAAAYAAAAA6AAAAYBfxJ0pjbWFwAAABxAAAACcAAAAsAAzpM2dseWYAAAH0AAAAGgAAABoNIh0kaGVhZAAAARwAAAAvAAAANgxLumdoaGVhAAABTAAAABUAAAAkCAEEAmhtdHgAAAG8AAAABgAAAAYEAAAAbG9jYQAAAewAAAAGAAAABgANAABtYXhwAAABZAAAABsAAAAgAg4AHW5hbWUAAAIQAAAAOAAAAD4C5wsecG9zdAAAAkgAAAAMAAAAIAADAAB4AWNgZGAAYQ5+qdB4fpuvDNIsDCBwaQGTAIi+VlscBaJZGMDiHAxMIAoAtjIF/QB4AWNgZGBgYQACOAkUQQWMAAGRABAAAAB4AWNgZGBgYGJgAdMMUJILJMQgAWICAAH3AC4AeAFjYGFhYJzAwMrAwDST6QwDA0M/hGZ8zWDMyMmAChgFkDgKQMBw4CXDSwYWEBdIYgAFBgYA/8sIdAAABAAAAAAAAAB4AWNgYGBkYAZiBgYeBhYGBSDNAoRA/kuG//8hpDgjWJ4BAFVMBiYAAAAAAAANAAAAAQAAAAAEAAQAAAMAABEhESEEAPwABAD8AAAAeAEtxgUNgAAAAMHHIQTShTlOAty9/4bf7AARCwlBNhBw4L/43qXjYGUmf19TMuLcj/BJL3XfBg54AWNgZsALAAB9AAR4AWNgYGAEYj4gFgGygGwICQACOwAoAAAAAAABAAEAAQAAAA4AAAAAyP8AAA==';
let svg = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="100" style="background:#fff;fill:#000;">' +
'<style type="text/css">'+
'@font-face{font-family:"chromacheck-colr";src:url(data:application/x-font-woff;base64,'+fontCOLR+') format("woff");}'+
'</style>'+
'<text x="0" y="0" font-size="20">' +
'<tspan font-family="chromacheck-colr" x="0" dy="20">&#xe900;</tspan>' + // COLR
'</text>' +
'</svg>';
canvas.width = 20;
canvas.height = 100;
img.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svg);
// FIXME wait for safari load our colr font
const wait = ms => new Promise((r, j)=>setTimeout(r, ms))
await wait(500);
context.drawImage(img, 0, 0);
colrFontSupported = (context.getImageData(10, 10, 1, 1).data[0] === 200);
}
catch (e) {
console.error("Couldn't load colr font", e);
colrFontSupported = false;
}
return colrFontSupported;
}
export async function fixupColorFonts() {
if (colrFontSupported !== undefined) {
return;
}
// we programatically add the right fontface.
let font;
if (await isColrFontSupported()) {
font = new FontFace("Twemoji", "url('../../fonts/Twemoji_Mozilla/TwemojiMozilla-colr.woff2')", {});
}
else {
font = new FontFace("Twemoji", "url('../../fonts/Twemoji_Mozilla/TwemojiMozilla-sbix.woff2')", {});
}
document.fonts.add(font);
}