font2 = {
const font = new Map(await FileAttachment("font@2.json").json());
const getPaths = (char) => font.get(char)[2];
const addPaths = (char, newPaths) => {
const [lt, gt, paths] = font.get(char);
return [lt, gt, [...paths, ...newPaths]];
};
const path = (str) =>
str.split(" ").map((coords) => coords.split(",").map((x) => +x));
const trema1 = [
path("-3.5,-10 -2.5,-9 -1.5,-10 -2.5,-11 -3.5,-10"),
path("1.5,-10 2.5,-9 3.5,-10 2.5,-11 1.5,-10")
];
const trema2 = [
path("-3,-10 -2,-9 -1,-10 -2,-11 -3,-10"),
path("2,-10 3,-9 4,-10 3,-11 2,-10")
];
const dot = [path("-1,-10 0,-9 1,-10 0,-11 -1,-10")];
const dot2 = [path("0,-10 1,-9 2,-10 1,-11 0,-10")];
const circ = [path("-3,-8 .5,-11 4,-8")];
const grav = [path("-2,-11 3,-8")];
font.set("1", [-10, 10, [path("-4,-8 1,-12 1,9")]]);
font.set("2", [
-10,
10,
[
path(
"-6,-7 -6,-8 -5,-10 -4,-11 -2,-12 2,-12 4,-11 5,-10 6,-8 6,-6 5,-4 -7,9 6,9"
)
]
]);
font.set("7", [-10, 10, [path("-5,-12 7,-12 -2,9"), path("-3,-1 7,-1")]]);
// reset default kerning for uppercase characters and digits
const pathsMinMax = (paths) =>
paths.reduce(
(mnmx, path) =>
path.reduce(([min, max], [x]) => {
return [Math.min(min, x), Math.max(max, x)];
}, mnmx),
[+Infinity, -Infinity]
);
[..."0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ"].forEach((char) => {
const paths = getPaths(char);
const [min, max] = pathsMinMax(paths);
font.set(char, [min - 3.2, max + 3.2, paths]);
});
// redraw some characters
const newe =
"-6,1.5 7,1.5 7,1 6,-2 5,-3 4,-4 2,-5 -1,-5 -3,-4 -5,-2 -6,1 -6,3 -5,6 -3,8 -1,9 2,9 4,8 6,6";
font.set("e", [-9, 10, [path(newe)]]);
const newg =
"8,-7 7,-9 5,-11 3,-12 -1,-12 -3,-11 -5,-9 -6,-7 -7,-4 -7,1 -6,4 -5,6 -3,8 -1,9 3,9 5,8 7,6 8,4 9,1 9,-0.5 3,-0.5";
font.set("G", [-10, 11, [path(newg)]]);
// adjust kerning for som characters
font
.set("f", [-6, 6, getPaths("f")])
.set("I", [-4, 4, getPaths("I")])
.set("1", [-8, 6, getPaths("1")])
.set(" ", [-6, 6, []]);
// add new characters
font
.set("à", addPaths("a", grav))
.set("ù", addPaths("u", grav))
.set("ê", addPaths("e", circ))
.set("â", addPaths("a", circ))
.set("ô", addPaths("o", circ))
.set("î", [-6, 6, [path("0,-5 0,9"), path("-3,-8 0,-11 3,-8")]])
//.set("œ", addPaths("o", []))
.set("ç", addPaths("c", [path(".5,10 0,11 2,12 1,14 -1,14")]))
.set("ë", addPaths("e", trema2))
.set("i", [-4, 4, [path("0,-5 0,9"), ...dot]])
.set("j", [-5, 5, [path("1,-5 1,12 0,15 -2,16 -4,16"), ...dot2]])
.set("ï", [-6, 6, [path("0,-5 0,9"), ...trema1]])
.set("ü", addPaths("u", trema2))
.set("ÿ", addPaths("y", trema2))
.set("û", addPaths("u", circ))
.set("é", addPaths("e", [path("3,-11 -2,-8")]))
.set("è", addPaths("e", grav))
.set("’", addPaths("'", []))
.set("É", addPaths("E", [path("3,-18 -2,-15")]))
.set("Ê", addPaths("E", [path("-3.5,-15 0,-18 3.5,-15")]))
.set("À", addPaths("A", [path("-4,-18 1,-15")]))
.set("Â", addPaths("A", [path("-3.5,-15 0,-18 3.5,-15")]))
.set("Ô", addPaths("O", [path("-3.5,-15 0,-18 3.5,-15")]))
.set("Î", addPaths("I", [path("-3.5,-15 0,-18 3.5,-15")]))
.set("—", [-17, 17, [path("-14,0 14,0")]])
.set("/", [-8, 8, [path("6,-12 -6,12")]])
.set("\\", [-8, 8, [path("6,12 -6,-12")]])
.set("[", [-12, 7, [path("4,-16 -3,-16 -3,16 4,16")]])
.set("]", [-7, 12, [path("-3,-16 4,-16 4,16 -3,16")]])
.set("{", [
-10,
10,
[
path(
"3,-16 2,-15 1,-14 0,-11 1,-5 0,-2 -1,-1 -3,0 -1,1 0,2 1,5 0,11 1,14 2,15 3,16"
)
]
])
.set("}", [
-10,
10,
[
path(
"-3,-16 -2,-15 -1,-14 0,-11 -1,-5 0,-2 1,-1 3,0 1,1 0,2 -1,5 0,11 -1,14 -2,15 -3,16"
)
]
])
.set("€", [
-14,
11,
[
path(
"7,-9 5,-11 3,-12 -1,-12 -3,-11 -5,-9 -6,-7 -7,-4 -7,1 -6,4 -5,6 -3,8 -1,9 3,9 5,8 7,6"
),
path("-10,-4 5,-4"),
path("-10,1 5,1")
]
])
.set("µ", [
-9,
10,
[
path("-5,-5 -5,16"),
path("-5,5 -4,8 -2,9 1,9 3,8 6,5"),
path("6,-5 6,9")
]
]);
//add "œ"
return font;
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
