Skip to content

Commit

Permalink
Fix emojis display (#2648)
Browse files Browse the repository at this point in the history
  • Loading branch information
gregberge authored Dec 20, 2024
1 parent 0e1a48c commit 5950657
Show file tree
Hide file tree
Showing 8 changed files with 18 additions and 70 deletions.
5 changes: 5 additions & 0 deletions .changeset/perfect-boxes-grow.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'gitbook': patch
---

Fix emojis display
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,12 @@ import assertNever from 'assert-never';
import colorContrast from 'postcss-color-contrast/js';
import colors from 'tailwindcss/colors';

import { fonts, ibmPlexMono } from '@/fonts';
import { fontNotoColorEmoji, fonts, ibmPlexMono } from '@/fonts';
import { getSpaceLanguage } from '@/intl/server';
import { getStaticFileURL } from '@/lib/assets';
import { hexToRgb, shadesOfColor } from '@/lib/colors';
import { tcls } from '@/lib/tailwind';

import { emojiFontClassName } from '../primitives';
import { ClientContexts } from './ClientContexts';

import '@gitbook/icons/style.css';
Expand Down Expand Up @@ -154,7 +153,7 @@ export async function CustomizationRootLayout(props: {
</head>
<body
className={tcls(
emojiFontClassName,
fontNotoColorEmoji.className,
`${fonts[customization.styling.font].className}`,
`${ibmPlexMono.variable}`,
'bg-light',
Expand Down
25 changes: 3 additions & 22 deletions packages/gitbook/src/components/RootLayout/globals.css
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@

@layer base {
:root {
/* See packages/gitbook/src/fonts/index.ts */
--font-emoji: 'Apple Color Emoji', var(--font-noto-color-emoji);
--scrollbar-width: calc(100vw - 100%);

--dark-base: 20 20 20;
Expand Down Expand Up @@ -196,26 +198,5 @@ html.dark {
/* Emojis */

[class*='emoji'] {
font-family: var(--font-emojis-sbix);
}

/* Safari Only CSS here */
_::-webkit-full-page-media,
_:future,
:root [class*='emoji'] {
font-family: var(--font-emojis-sbix);
}

/* Chrome Only CSS here */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
.emoji {
font-family: var(--font-emojis-colrv1);
}
}

/* Firefox Only CSS here */
@-moz-document url-prefix() {
.emoji {
font-family: var(--font-emojis-colrv1);
}
font-family: var(--font-emoji);
}
45 changes: 0 additions & 45 deletions packages/gitbook/src/components/primitives/Emoji/Emoji.tsx
Original file line number Diff line number Diff line change
@@ -1,51 +1,6 @@
import localFont from 'next/font/local';

import { getEmojiForCode } from '@/lib/emojis';
import { ClassValue, tcls } from '@/lib/tailwind';

/**
COLRv1 font.
- lightweight, top quality
- widely supported by modern browsers
- currently not by Safari (or iOS)
*/
const colrv1Font = localFont({
src: './joypixels-colrv1.woff2',
preload: false,
variable: '--font-emojis-colrv1',
});

/**
SBIX font.
- narrowly supported
- currently required for Safari (or iOS)
- provide alternative font-family name (see below)
*/
const sbixFont = localFont({
src: './joypixels-sbix.woff2',
preload: false,
variable: '--font-emojis-sbix',
});

/**
CBDT font.
- widely supported
- currently not by Safari (or iOS)
- retain for legacy browser support
*/
const cbdtFont = localFont({
src: './joypixels-cbdt.woff2',
preload: false,
variable: '--font-emojis-cbdt',
});

/**
* Class name to set on the <html> tag to use the emoji font.
*/
export const emojiFontClassName = [colrv1Font.variable, sbixFont.variable, cbdtFont.variable].join(
' ',
);

/**
* Render an emoji by its codepoint.
* It renders the UTF-8 character and use the emojione font to display it (fallbacking to default browser font).
Expand Down
Binary file not shown.
Binary file not shown.
Binary file not shown.
8 changes: 8 additions & 0 deletions packages/gitbook/src/fonts/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,17 @@ import {
Roboto_Slab,
Source_Sans_3,
Ubuntu,
Noto_Color_Emoji,
} from 'next/font/google';
import localFont from 'next/font/local';

export const fontNotoColorEmoji = Noto_Color_Emoji({
variable: '--font-noto-color-emoji',
weight: ['400'],
preload: false,
display: 'swap',
});

/*
Fonts are downloaded and loaded by next/font.
Expand Down

0 comments on commit 5950657

Please sign in to comment.