Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Updating size-adjust calculation #41406

Merged
merged 15 commits into from Oct 20, 2022
Merged

Updating size-adjust calculation #41406

Show file tree
Hide file tree
Changes from 14 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
1cda34d
Updating google-font-metrics.json
janicklas-ralph Sep 28, 2022
2f6c05d
Adding sizeAdjust based calc
janicklas-ralph Sep 29, 2022
0cfb9c5
Merge branch 'canary' of github.com:vercel/next.js into font-size-adjust
janicklas-ralph Sep 29, 2022
c31847d
Merge branch 'canary' into font-size-adjust
kodiakhq[bot] Sep 30, 2022
5551b83
Merge branch 'canary' into font-size-adjust
kodiakhq[bot] Sep 30, 2022
16f820a
Merge branch 'canary' of github.com:vercel/next.js into font-size-adjust
janicklas-ralph Oct 4, 2022
64456dd
Merge branch 'canary' of github.com:vercel/next.js into font-size-adjust
janicklas-ralph Oct 13, 2022
db28032
Merge branch 'canary' of github.com:vercel/next.js into font-size-adjust
janicklas-ralph Oct 14, 2022
a40d198
Updating size-adjust calc to use azAvgWidth instead of xAvgCharWidth
janicklas-ralph Oct 14, 2022
4ec6247
Merge branch 'font-size-adjust' of github.com:janicklas-ralph/next.js…
janicklas-ralph Oct 14, 2022
6cb3f99
Fix tests
Oct 14, 2022
59a027b
Merge branch 'canary' into font-size-adjust
Oct 20, 2022
fb0885c
Merge branch 'canary' into font-size-adjust
Oct 20, 2022
e966315
Merge branch 'canary' into font-size-adjust
balazsorban44 Oct 20, 2022
2de4a71
Merge branch 'canary' into font-size-adjust
ijjk Oct 20, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
3 changes: 2 additions & 1 deletion packages/font/src/local/loader.ts
View file
Open in desktop
Expand Up @@ -6,7 +6,7 @@ import fontFromBuffer from '@next/font/dist/fontkit'
import type { AdjustFontFallback, FontLoader } from 'next/font'

import { promisify } from 'util'
import { validateData } from './utils'
import { calcAzWidth, validateData } from './utils'

const fetchFonts: FontLoader = async ({
functionName,
Expand Down Expand Up @@ -58,6 +58,7 @@ const fetchFonts: FontLoader = async ({
lineGap: fontMetadata.lineGap,
unitsPerEm: fontMetadata.unitsPerEm,
xAvgCharWidth: (fontMetadata as any)['OS/2']?.xAvgCharWidth,
azAvgWidth: calcAzWidth(fontMetadata),
})
adjustFontFallbackMetrics = {
fallbackFont,
Expand Down
11 changes: 11 additions & 0 deletions packages/font/src/local/utils.ts
View file
Open in desktop
@@ -1,3 +1,5 @@
import type { Font } from 'fontkit'

const allowedDisplayValues = ['auto', 'block', 'swap', 'fallback', 'optional']

const formatValues = (values: string[]) =>
Expand Down Expand Up @@ -91,3 +93,12 @@ export function validateData(functionName: string, data: any): FontOptions {
declarations,
}
}

// Calculating the a-z average width
export function calcAzWidth(font: Font) {
const widths = font
.glyphsForString('abcdefghijklmnopqrstuvwxyz')
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we include space (" ") in the width?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sounds good to me!

.map((glyph) => glyph.advanceWidth)
const totalWidth = widths.reduce((sum, width) => sum + width, 0)
return totalWidth / widths.length
}
8 changes: 4 additions & 4 deletions packages/next/server/font-utils.ts
View file
Open in desktop
Expand Up @@ -119,14 +119,14 @@ export function calculateOverrideValues(fontMetrics: any) {
}

export function calculateSizeAdjustValues(fontMetrics: any) {
let { category, ascent, descent, lineGap, unitsPerEm, xAvgCharWidth } =
let { category, ascent, descent, lineGap, unitsPerEm, azAvgWidth } =
fontMetrics
const fallbackFont =
category === 'serif' ? DEFAULT_SERIF_FONT : DEFAULT_SANS_SERIF_FONT

let sizeAdjust = xAvgCharWidth
? xAvgCharWidth / fallbackFont.xAvgCharWidth
: 1
const mainFontAvgWidth = azAvgWidth / unitsPerEm
const fallbackFontAvgWidth = fallbackFont.azAvgWidth / fallbackFont.unitsPerEm
let sizeAdjust = azAvgWidth ? mainFontAvgWidth / fallbackFontAvgWidth : 1

ascent = formatOverrideValue(ascent / (unitsPerEm * sizeAdjust))
descent = formatOverrideValue(descent / (unitsPerEm * sizeAdjust))
Expand Down