Erscheinungsbild: Unterschied zwischen den Versionen

Aus Quartierwerkstatt Viktoria
K (Moritz Vifian verschob die Seite Layout nach Erscheinungsbild)
(Versucht schrift in SVG einzubetten. Zumindest einmal dokumentiert wie man es machen würde)
 
(Eine dazwischenliegende Version desselben Benutzers wird nicht angezeigt)
Zeile 23: Zeile 23:
* Version des Merkblattes
* Version des Merkblattes
* QR-Code auf Wiki
* QR-Code auf Wiki
* [[Datei:Vorlage grob.svg|mini]]
===Einbetten der Schrift ins SVG===
Vorteile
* Interaktive SVGs (mit Links und so) werden im Browser für alle korrekt dargestellt
* Vorschau im Mediawiki rendert mit der korrekten Schrift
Komprimieren der Fonts https://github.com/zachleat/glyphhanger?tab=readme-ov-file#whitelist-characters
glyphhanger --LATIN --formats=woff2 --subset='*.ttf'
Umwandeln der Schrift in base64
echo "console.log(require('fs').readFileSync('Raleway[wght]-subset.woff2').toString('base64'))" | node
Einbetten im SVG:
  <style id="style1">
    @font-face {
    font-family: Raleway;
    src: url("data:application/font-woff2;charset=utf-8;base64,d09GMgABAAA
  ....
==== Caveat ====
* Mediawiki meckert noch wegen fontface im style tag
* Inkscape stellt die schrift aus dem Dokument nicht dar

Aktuelle Version vom 24. April 2024, 14:07 Uhr

Schrift

Die Haussschrift der Viktoria-Quartier-Werktstatt: https://fonts.google.com/specimen/Raleway

Layoutprogramme

Open-Source

Die folgenden Programme sind frei verfügbar. Somit können hochgeladene Dateien durch alle wieder bearbeitet werden:

Nicht-Opensource

Es gibt zahlreiche komerzielle Programme, die die gleichen (oder sogar mehr) Features zur Verfügung stellen. Diese haben jedoch den gravierenden Nachteil, dass für das Bearbeiten der originalen Dateien eine Lizenz benötigt wird. Daher sollte man im Sinne der digitalen Nachhaltigkeit nur freie (=open source) Programme verwenden. Auch bei Freeware ist Vorsicht geboten (z.B. Fusion360, Onshape), da es immer nur im moment "frei" verfügbar ist, der Hersteller die Bedingungen aber jederzeit einseitig ändern kann.

Merkblätter

Damit man nicht immer ein Tablet / Notebook in der Werkstatt dabei haben muss, ist es nützlich wichtige Infos bei den jeweiligen Arbeitsplätzen aufzuhängen

Nützliche Inhalte

  • Version des Merkblattes
  • QR-Code auf Wiki
  • Vorlage grob.svg

Einbetten der Schrift ins SVG

Vorteile

  • Interaktive SVGs (mit Links und so) werden im Browser für alle korrekt dargestellt
  • Vorschau im Mediawiki rendert mit der korrekten Schrift

Komprimieren der Fonts https://github.com/zachleat/glyphhanger?tab=readme-ov-file#whitelist-characters

glyphhanger --LATIN --formats=woff2 --subset='*.ttf'

Umwandeln der Schrift in base64

echo "console.log(require('fs').readFileSync('Raleway[wght]-subset.woff2').toString('base64'))" | node

Einbetten im SVG:

  <style id="style1">
    @font-face {
    font-family: Raleway;
    src: url("data:application/font-woff2;charset=utf-8;base64,d09GMgABAAA
 ....

Caveat

  • Mediawiki meckert noch wegen fontface im style tag
  • Inkscape stellt die schrift aus dem Dokument nicht dar