Skip to content
Snippets Groups Projects
Commit f33814e9 authored by TilCreator's avatar TilCreator
Browse files

Merge branch 'no-bundled-fonts' into 'master' 

render text into svg paths; don't bundle fonts with the svg

See merge request !2
parents 3404d2aa 0dded2d2
No related branches found
No related tags found
1 merge request!2render text into svg paths; don't bundle fonts with the svg
Pipeline #14840 passed
Stage: build
Show whitespace changes
Inline Side-by-side
flake.nix
+ 20
− 26
View file @ f33814e9
...@@ -11,31 +11,32 @@ ...@@ -11,31 +11,32 @@
let pkgs = nixpkgs.legacyPackages.${system}; in let pkgs = nixpkgs.legacyPackages.${system}; in
rec { rec {
packages = rec { packages = rec {
google_fonts = pkgs.fetchFromGitHub {
owner = "google";
repo = "fonts";
rev = "2fba0d68602b7eb3374d030c1c34939de56023f9";
sha256 = "sha256-IFkKwRRyZeOXD8/9n8UDrruUKK6oQK4BD9wYN2dmSAc=";
};
generator = pkgs.stdenv.mkDerivation rec { generator = pkgs.stdenv.mkDerivation rec {
name = "generator"; name = "generator";
version = "0.0.0"; version = "0.0.0";
src = ./src/index.html; src = ./src/index.html;
src-font = ./src/font;
src-template = ./src/svg_templates;
dontUnpack = true; dontUnpack = true;
buildPhase = '' buildPhase = ''
cp ${src} index.html cp ${src} index.html
substituteInPlace index.html \ substituteInPlace index.html \
--replace "@SVG_BIG_TEMPLATE@" \ --replace "@SVG_BIG_TEMPLATE@" \
"$(base64 -w0 ${svg_templates}/logo_big_template.svg)" "$(base64 -w0 ${src-template}/logo_big_template.svg)"
substituteInPlace index.html \ substituteInPlace index.html \
--replace "@SVG_SMALL_TEMPLATE@" \ --replace "@SVG_SMALL_TEMPLATE@" \
"$(base64 -w0 ${svg_templates}/logo_small_template.svg)" "$(base64 -w0 ${src-template}/logo_small_template.svg)"
''; '';
installPhase = '' installPhase = ''
mkdir -p $out $out/img $out/font mkdir -p $out $out/img $out/font $out/js
cp index.html $out/index.html cp index.html $out/index.html
cp ${opentype_js} $out/js/opentype.min.js
cp ${favicon}/favicon.svg ${favicon}/favicon.png $out/img cp ${favicon}/favicon.svg ${favicon}/favicon.png $out/img
cp ${google_fonts}/ufl/ubuntumono/UbuntuMono-Regular.ttf ${google_fonts}/ufl/ubuntu/Ubuntu-Regular.ttf ${google_fonts}/ufl/ubuntu/Ubuntu-Bold.ttf $out/font # bundle the Genos-Bold font, since opentype.js can't work with the
# variable-width version that's included in google fonts
cp ${google_fonts}/ufl/ubuntumono/UbuntuMono-Regular.ttf ${google_fonts}/ufl/ubuntu/Ubuntu-Regular.ttf ${google_fonts}/ufl/ubuntu/Ubuntu-Bold.ttf \
${google_fonts}/ofl/notosansjp/NotoSansJP-Black.otf ${src-font}/Genos-Bold.ttf \
$out/font
''; '';
}; };
favicon = pkgs.stdenv.mkDerivation rec { favicon = pkgs.stdenv.mkDerivation rec {
...@@ -50,22 +51,15 @@ ...@@ -50,22 +51,15 @@
cp favicon.png $out/ cp favicon.png $out/
''; '';
}; };
svg_templates = pkgs.stdenv.mkDerivation rec { opentype_js = pkgs.fetchurl {
name = "generator"; url = "https://cdn.jsdelivr.net/npm/opentype.js@latest/dist/opentype.min.js";
version = "0.0.0"; sha256 = "sha256-wPnHyoXhgHWogZ5f4t7m4dU1+aImn1MU82zOlKGDrbo=";
src = ./src/svg_templates; };
buildPhase = '' google_fonts = pkgs.fetchFromGitHub {
substituteInPlace logo_big_template.svg \ owner = "google";
--replace "@GENOS_FONT@" \ repo = "fonts";
"$(base64 -w0 ${google_fonts}/ofl/genos/Genos\[wght\].ttf)" rev = "2fba0d68602b7eb3374d030c1c34939de56023f9";
substituteInPlace logo_big_template.svg \ sha256 = "sha256-IFkKwRRyZeOXD8/9n8UDrruUKK6oQK4BD9wYN2dmSAc=";
--replace "@NOTO_SANS_JP_FONT@" \
"$(base64 -w0 ${google_fonts}/ofl/notosansjp/NotoSansJP-Black.otf)"
'';
installPhase = ''
mkdir -p $out
cp logo_big_template.svg logo_small_template.svg $out/
'';
}; };
}; };
defaultPackage = packages.generator; defaultPackage = packages.generator;
......
src/font/Genos-Bold.ttf 0 → 100644
+ 0
− 0
View file @ f33814e9
File added
src/index.html
+ 22
− 4
View file @ f33814e9
...@@ -263,8 +263,14 @@ ...@@ -263,8 +263,14 @@
} }
} }
</style> </style>
<script src="js/opentype.min.js"></script>
<script> <script>
onhtmlload = () => { onhtmlload = () => {
opentype.load('font/NotoSansJP-Black.otf', (err, notosans) =>
opentype.load("font/Genos-Bold.ttf", (err, genos) => main(genos, notosans)))
};
main = (genos, notosans) => {
svg_big = new DOMParser().parseFromString(atob("@SVG_BIG_TEMPLATE@"), "image/svg+xml").querySelector("svg"); svg_big = new DOMParser().parseFromString(atob("@SVG_BIG_TEMPLATE@"), "image/svg+xml").querySelector("svg");
svg_small = new DOMParser().parseFromString(atob("@SVG_SMALL_TEMPLATE@"), "image/svg+xml").querySelector("svg"); svg_small = new DOMParser().parseFromString(atob("@SVG_SMALL_TEMPLATE@"), "image/svg+xml").querySelector("svg");
...@@ -351,11 +357,23 @@ ...@@ -351,11 +357,23 @@
// Only show the selected animal // Only show the selected animal
[svg_big, svg_small].forEach((e) => e.querySelectorAll(".animal").forEach((e) => e.style.display = e.id === animal_selected ? "inline" : "none")); [svg_big, svg_small].forEach((e) => e.querySelectorAll(".animal").forEach((e) => e.style.display = e.id === animal_selected ? "inline" : "none"));
// Set the headline // we don't have any alignment, so center the text by hand
svg_big.querySelector("#headline").innerHTML = headline_text; let centered_text_path = (font, text, y, fontsize) => {
let box = font.getPath(text, 0,0, fontsize).getBoundingBox();
// 67.73333 mm is half the width of the svg
return font.getPath(text, 67.73333-box.x2/2, y, fontsize).toSVG();
}
// Set the big headline (this id is the <g> tag of the default font,
// which was converted to a group of paths by inkscape)
svg_big.querySelector("#headline").innerHTML =
centered_text_path(genos, headline_text, 107.123, 33.84);
// Set the sub headline, second line starts after the first newline // Set the sub headline, second line starts after the first newline
[0, 1].forEach((i) => svg_big.querySelectorAll("#sub_headlines tspan").item(i).innerHTML = sub_headline_texts.length > i ? sub_headline_texts[i] : ""); [0, 1].forEach((i) =>
svg_big.querySelectorAll("#sub_headlines g").item(i).innerHTML =
sub_headline_texts.length > i ? centered_text_path(notosans, sub_headline_texts[i], 122+15*i, 14) : ""
);
// Set all colors // Set all colors
apply_color = (selector, style_key, value) => [svg_big, svg_small].forEach((e) => e.querySelectorAll(selector).forEach((e) => e.style[style_key] = value)); apply_color = (selector, style_key, value) => [svg_big, svg_small].forEach((e) => e.querySelectorAll(selector).forEach((e) => e.style[style_key] = value));
......
src/svg_templates/logo_big_template.svg
+ 13
− 42
View file @ f33814e9
...@@ -14,21 +14,6 @@ ...@@ -14,21 +14,6 @@
xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"> xmlns:svg="http://www.w3.org/2000/svg">
<style
id="style1263">
@font-face {
font-family: &quot;Genos&quot;;
src: url('data:font/sfnt;base64,@GENOS_FONT@') format('truetype');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: &quot;Noto Sans JP&quot;;
src: url('data:application/vnd.ms-opentype;base64,@NOTO_SANS_JP_FONT@') format(&quot;opentype&quot;);
font-weight: 900;
font-style: normal;
}
</style>
<sodipodi:namedview <sodipodi:namedview
id="namedview1229" id="namedview1229"
pagecolor="#505050" pagecolor="#505050"
...@@ -150,36 +135,22 @@ ...@@ -150,36 +135,22 @@
style="display:inline"> style="display:inline">
<g <g
id="sub_headlines"> id="sub_headlines">
<text <g
xml:space="preserve" aria-label="ブリッジ・バブルス"
id="text111097-5-6" id="text111097-5-6"
style="font-style:normal;font-variant:normal;font-weight:900;font-stretch:normal;font-size:14.4514px;line-height:0.95;font-family:'Noto Sans JP';-inkscape-font-specification:'Noto Sans JP Heavy';text-align:center;letter-spacing:-0.777875px;text-anchor:middle;white-space:pre;display:inline;stroke-width:0.264583" style="font-weight:900;font-size:14.4514px;line-height:0.95;font-family:'Noto Sans JP';-inkscape-font-specification:'Noto Sans JP Heavy';text-align:center;letter-spacing:-0.777875px;text-anchor:middle;white-space:pre;display:inline;stroke-width:0.264583;fill:#62c1a6">
x="67.574364" </g>
y="121.20871"><tspan <g
style="text-align:center;text-anchor:middle;fill:#62c1a6;stroke-width:0.264583" aria-label="ブリッジ2バブルス"
id="tspan159496-9"
class="color_accent">ブリッジ・バブルス</tspan></text>
<text
xml:space="preserve"
id="text111097-5" id="text111097-5"
style="font-style:normal;font-variant:normal;font-weight:900;font-stretch:normal;font-size:14.4514px;line-height:0.95;font-family:'Noto Sans JP';-inkscape-font-specification:'Noto Sans JP Heavy';text-align:center;letter-spacing:-0.777875px;text-anchor:middle;white-space:pre;display:inline;stroke-width:0.264583" style="font-weight:900;font-size:14.4514px;line-height:0.95;font-family:'Noto Sans JP';-inkscape-font-specification:'Noto Sans JP Heavy';text-align:center;letter-spacing:-0.777875px;text-anchor:middle;white-space:pre;display:inline;stroke-width:0.264583;fill:#62c1a6">
x="67.574364" </g>
y="136.02525"><tspan </g>
style="text-align:center;text-anchor:middle;fill:#62c1a6;stroke-width:0.264583" <g
id="tspan159500" aria-label="DiVOC"
class="color_accent">ブリッジ2バブルス</tspan></text> id="headline"
style="font-weight:bold;font-size:33.8435px;line-height:1.25;font-family:Genos;-inkscape-font-specification:'Genos Bold';text-align:center;text-anchor:middle;display:inline;fill:#ffebd8;stroke-width:0.441811">
</g> </g>
<text
xml:space="preserve"
style="font-size:33.8435px;line-height:1.25;font-family:'Andale Mono';-inkscape-font-specification:'Andale Mono';text-align:center;text-anchor:middle;display:inline;fill:#ffebd8;fill-opacity:1;stroke-width:0.441811"
x="67.327217"
y="107.12258"
id="text111095"><tspan
sodipodi:role="line"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:Genos;-inkscape-font-specification:'Genos Bold';text-align:center;text-anchor:middle;fill:#ffebd8;fill-opacity:1;stroke-width:0.441811"
x="67.327217"
y="107.12258"
id="headline">DiVOC</tspan></text>
</g> </g>
<g <g
inkscape:groupmode="layer" inkscape:groupmode="layer"
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment

Impressum - Datenschutzerklärung