Skip to content

Conversation

@Mrazator
Copy link
Member

@Mrazator Mrazator commented Aug 16, 2024

Glyphs subsetting powered by wasm-based harfbuzzjs and woff2 encoder & decoder.

Follow-up of #8345 due to the mentioned limitations, mainly the inability to handle kerning (GPOS) and ligatures (GSUB) subsetting, resulting in layout shifts. Instead, relying on Harfbuzz seems as the only viable solution (used in browser and server-side) that performs subsetting also on these tables.

Business value
Decreases size of each inlined font by up to 95% (dependening on the used characters).

Closes #8300


TODO

  • Handle comments in feat: subset font glyphs for SVG export #8345
  • Test server-side use cases
  • Test utils standalone, as currently it ignores all external packages in its prod build
  • Test lazy loading of fonts & wasm works correctly
  • Test subsetting works correctly on different font faces, with advanced kerning & ligatures

Consider adding loading WASM from URL

  • Likely won't increase the bandiwdth that much, as it's lazy-fetched only the first time user triggers "Export as SVG" (ignored from sw prefetch). Later it's cached in memory (so subsequent call won't try to load it again) and cached by the service worker (CacheFirst, so subsequent visits won't fetch it again). Loading all WASM from binary buffer will also keep us consistent with the server-side and other use cases and avoids issues with network restrictions. In the future we might consider another wasmloader based on WebAssembly.instantiateStreaming, which might be worth for bigger modules also due to perf. @dwelle thoughts?

Also, all the lazy loaded chunks add just about 750kB (gzipped), mainly as we use just a harfbuzz subset.
Screenshot 2024-08-20 at 16 57 46

Consider adding a cache for fonts so they are not loaded for each library item (might be another PR)

  • Not needed for now, instead library items don't contain @font-face definitions at all, though might change in the future with custom fonts

@vercel
Copy link

vercel bot commented Aug 16, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated (UTC)
excalidraw ✅ Ready (Inspect) Visit Preview Aug 30, 2024 4:44pm
excalidraw-package-example ✅ Ready (Inspect) Visit Preview Aug 30, 2024 4:44pm
excalidraw-package-example-with-nextjs ✅ Ready (Inspect) Visit Preview Aug 30, 2024 4:44pm
1 Skipped Deployment
Name Status Preview Updated (UTC)
docs ⬜️ Ignored (Inspect) Visit Preview Aug 30, 2024 4:44pm

@github-actions
Copy link

github-actions bot commented Aug 16, 2024

Coverage Report

Status Category Percentage Covered / Total
🔴 Lines 65.85% (🎯 70%) 60971 / 92580
🔴 Statements 65.85% (🎯 70%) 60971 / 92580
🔴 Functions 63.16% (🎯 68%) 1847 / 2924
🟢 Branches 79.95% (🎯 70%) 7532 / 9420
File Coverage
File Stmts % Branch % Funcs % Lines Uncovered Lines
Changed Files
packages/excalidraw/analytics.ts 46.51% 33.33% 100% 46.51% 19-39, 41-42
packages/excalidraw/actions/actionProperties.tsx 78.11% 81.03% 87.69% 78.11% 197-199, 239-240, 274, 423-425, 441-450, 687, 773-799, 811-838, 864-865, 867-868, 880, 896-898, 936-959, 987, 1001, 1003-1007, 1013-1015, 1058-1063, 1065-1070, 1072-1132, 1161-1162, 1214, 1252-1253, 1302, 1327-1328, 1335, 1338, 1468-1500, 1552-1701, 1747-1748
packages/excalidraw/components/PublishLibrary.tsx 7.96% 100% 0% 7.96% 38-104, 107-198, 201-538
packages/excalidraw/fonts/ExcalidrawFont.ts 76.52% 62.5% 100% 76.52% 13, 52-63, 81-101, 141-142, 169-173, 186-187, 191-192, 202-206
packages/excalidraw/fonts/wasm/hb-subset.bindings.ts 50.99% 25% 100% 50.99% 56-59, 103-166, 168-198
packages/excalidraw/fonts/wasm/hb-subset.loader.ts 93.1% 75% 100% 93.1% 42-43, 46-47
packages/excalidraw/fonts/wasm/hb-subset.wasm.ts 100% 100% 100% 100%
packages/excalidraw/fonts/wasm/woff2.bindings.ts 47.23% 54.03% 26.57% 47.23% 36, 53-54, 71-74, 78-79, 87-125, 127-158, 161, 163-164, 166-167, 174-175, 177-181, 183-190, 192-204, 206-207, 209-210, 220-221, 226-227, 231-232, 237-238, 242-243, 248-249, 288-289, 296-297, 304-305, 312-315, 317-324, 327-328, 330-331, 336-337, 343-349, 352-353, 358-361, 365-368, 379-380, 383-389, 391-439, 441-444, 448-491, 493-494, 496-544, 546-551, 553-570, 574, 576-581, 584-588, 617-621, 627-630, 645, 668-673, 675-678, 681-686, 692-693, 696-699, 704-706, 709-713, 727-733, 747-749, 753-759, 763-764, 766-767, 791-792, 801-816, 820-821, 826-827, 832-833, 849-860, 863-866, 868-869, 871-872, 874-875, 877-878, 880-881, 883-884, 886-887, 889-890, 892-893, 895-896, 904, 915-921, 926-927, 929-939, 973-974, 980-986, 988-997, 1003-1010, 1023-1052, 1054-1059, 1061-1073, 1075-1080, 1082-1089, 1091-1092, 1096-1112, 1117-1120, 1122-1141, 1143-1158, 1160-1170, 1172-1180, 1182-1183, 1185-1187, 1189-1190, 1195-1203, 1206-1209, 1211-1213, 1215-1223, 1225-1226, 1229-1240, 1242-1243, 1245-1256, 1258-1259, 1261-1272, 1274-1292, 1294-1295, 1307, 1333-1334, 1338-1339, 1354-1362, 1367-1371, 1376-1377, 1380-1381, 1393-1394, 1426-1429, 1432-1435, 1440-1441, 1464-1465, 1467-1468, 1471-1482, 1487-1506, 1508-1517, 1519-1523, 1527-1532, 1534-1539, 1547-1564, 1567-1582, 1584-1596, 1598-1599, 1603-1608, 1610-1622, 1633-1651, 1654-1667, 1697-1704, 1709-1713, 1715-1718, 1720-1723, 1733-1810, 1813-1817, 1819-1822, 1824-1827, 1829-1832, 1842-1843, 1846-1847, 1851-1854, 1856-1859, 1864-1871, 1874-1875, 1877-1884, 1886-1890, 1900-1901, 1903-1905, 1914-1915, 1919-1920, 1929-1931, 1937-1945, 1947-1959, 1963-1964, 1967, 1977-1978, 1980-1986, 2034-2035, 2039-2040, 2043, 2045, 2071, 2073, 2077-2081, 2085-2088, 2093-2097, 2099-2119, 2141-2142, 2144-2145, 2152-2154, 2164-2165, 2172-2189, 2243-2248, 2268-2275, 2278-2282, 2286-2302, 2310-2313, 2332-2335, 2343-2345, 2362-2363, 2400, 2438-2439, 2441-2445, 2450-2452, 2458-2460, 2473-2474, 2495-2502, 2504-2510, 2518-2519, 2521-2522, 2524-2525, 2527-2528, 2548-2549, 2556-2564, 2569-2570, 2573-2574, 2576, 2585-2586, 2588-2594, 2614-2618, 2636-2637, 2644-2645, 2647-2648, 2652-2653, 2655-2656, 2658, 2674-2675, 2688-2691, 2693-2698, 2723-2728, 2747-2782, 2793-2794, 2797-2798, 2800-2802, 2812, 2814-2823, 2830-2831, 2846-2849, 2852-2853, 2859-2868, 2870-2882, 2886-2887, 2897-2898, 2900-2901, 2912-2915, 2924-2925, 2930-2939, 2941-2976, 2978-2979, 2981-2982, 2984-2985, 2987-2988, 3004-3005, 3007-3008, 3010-3011, 3013-3014, 3016-3017, 3019-3020, 3022-3023, 3025-3026, 3028-3029, 3031-3032, 3034-3035, 3037-3038, 3040-3041, 3043-3044, 3102-3111, 3113-3122, 3125-3137, 3139-3148, 3150-3159, 3183-3192, 3205-3214, 3216-3225, 3227-3236, 3238-3247, 3260-3269, 3293-3302, 3304-3313, 3315-3324, 3326-3335, 3337-3346, 3348-3357, 3359-3368, 3370-3379, 3381-3390, 3394-3397, 3401-3404, 3410-3413, 3417-3420, 3424-3427, 3431-3434, 3438-3441, 3445-3448, 3452-3455, 3459-3462, 3466-3469, 3474-3477, 3481-3484, 3488-3491, 3495-3498, 3502-3505, 3509-3512, 3516-3519, 3523-3526, 3530-3533, 3537-3540, 3544-3547, 3551-3554, 3558-3561, 3565-3568, 3572-3575, 3579-3582, 3586-3589, 3593-3596, 3600-3603, 3607-3610, 3614-3617, 3621-3624, 3628-3631, 3634-3639, 3641-3646, 3649-3652, 3656-3659, 3663-3666, 3670-3673, 3677-3680, 3684-3687, 3691-3694, 3698-3701, 3705-3708, 3712-3715, 3719-3722, 3726-3729, 3733-3736, 3740-3743, 3747-3750, 3754-3757, 3761-3764, 3768-3771, 3775-3778, 3781-3786, 3788-3793, 3795-3800, 3802-3807, 3810-3813, 3817-3820, 3824-3827, 3831-3834, 3838-3841, 3845-3848, 3852-3855, 3859-3862, 3871-3874, 3881-3884, 3891-3894, 3901-3904, 3911-3914, 3920, 3925-3926, 3933-3936, 3942-3943, 3953-3954, 3957-3958, 3961-3962, 3975-3981, 3989-4011, 4013-4032, 4034-4040
packages/excalidraw/fonts/wasm/woff2.loader.ts 90% 80% 80% 90% 42-44, 53-54, 58-59
packages/excalidraw/fonts/wasm/woff2.wasm.ts 100% 100% 100% 100%
packages/excalidraw/hooks/useLibraryItemSvg.ts 88.75% 62.5% 60% 88.75% 39, 54-59, 72-73
packages/excalidraw/scene/export.ts 87.4% 82.35% 83.33% 87.4% 50-75, 98, 147-148, 172-176, 316-317, 402-406, 427-436, 466-468, 476-481, 484-486
scripts/buildWasm.js 0% 0% 0% 0% 1-75
Generated in workflow #3212

@dwelle
Copy link
Member

dwelle commented Aug 30, 2024

Let's rock and roll! ❤️ 🚀

@dwelle dwelle merged commit ee30225 into master Aug 30, 2024
@dwelle dwelle deleted the mrazator/glyph-subsetting-by-harfbuzz branch August 30, 2024 20:26
clarencechaan pushed a commit to clarencechaan/excalidraw that referenced this pull request Oct 3, 2024
Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Reduce exported SVG size by glyph subsetting

3 participants