JavaScript-Dateien einbinden:
Die beiden Dateien
pdfmaker.js
und
bingo.js
sowie die Font-Metrik-Dateien für die genutzten Schriftarten werden im Kopf der Seite
eingebunden:
<script src="j/afm-helvetica.js"></script> <script src="j/pdfmaker.js"></script> <script src="j/bingo.js"></script>
In die Seite wird ein <form>
-Element eingefügt.
Das bingo.js
installiert sich in alle <form>
-Elemente,
die ein <button>
-Element mit dem Namen create-pdf
enthalten:
<html> <head> <script src="j/afm-helvetica.js"></script> <script src="j/pdfmaker.js"></script> <script src="j/bingo.js"></script> <title>Bingo!</title> </head> <body> <h1>Bingo!</h1> <form> <button name="create-pdf" type="button">PDF erzeugen</button> </form> </body> </html>
Ausprobieren:
bingo-simple.htm
.
PDF-Parameter:
Mit Attributen des <form>
-Elementes können Sie Namen,
Titel und Betreff des erzeugten PDFs konfigurieren sowie eine Rückfrage konfigurieren.
Attributnamen | Inhalt | Bedeutung | Default |
---|---|---|---|
data-pdf-confirm |
Text | Hinweis wird vor der PDF-Erzeugung ausgegeben und muss bestätigt werden. | kein Hinweis |
data-pdf-filename |
Name | Namensprefix für die heruntergeladenen PDF-Dateien | bingo |
data-pdf-subject |
Text | Wird in die PDF-Metadaten als "Betreff" aufgenommen. | kein Betreff |
data-pdf-title |
Text | Wird in die PDF-Metadaten als "Titel" aufgenommen | Bingo! |
Coupon-Parameter:
Diese Parameter werden aus <input>
und <select>
-Elementen des
<form>
-Elementes entnommen.
Feldnamen | Format | Einheit | Beschreibung | Default |
---|---|---|---|---|
cards-per-page |
Ganzzahl : Ganzzahl | Coupons/Zeile, Coupons/Spalte | Zahl der Coupons je Druckseite | 1:1 |
card-format |
Ganzzahl | 4 für 4×4, 5 für 5×5… | Format der Coupons | 5 für 5×5 |
n-pages |
Ganzzahl | Seiten | Druckseiten im PDF | 1 |
Ausprobieren:
bingo-format-size.htm
.
Papierformat:
Auch diese Parameter werden aus <input>
und <select>
-Elementen
des <form>
-Elementes entnommen.
Feldnamen | Format | Einheit | Beschreibung |
---|---|---|---|
page-width-mm |
Zahl | Millimeter | Breite einer Druckseite |
page-height-mm |
Zahl | Millimeter | Höhe einer Druckseite |
page-size-mm |
Zahl : Zahl | Millimeter | Breite und Höhe einer Druckseite |
margin-left-mm |
Zahl | Millimeter | linker Papierrand |
margin-right-mm |
Zahl | Millimeter | rechter Papierrand |
margin-left-right-mm |
Zahl : Zahl | Millimeter | linker und rechter Papierrand |
margin-top-mm |
Zahl | Millimeter | oberer Papierrand |
margin-bottom-mm |
Zahl | Millimeter | unterer Papierrand |
margin-top-bottom-mm |
Zahl : Zahl | Millimeter | oberer und unterer Papierrand |
card-spacing-mm |
Zahl | Millimeter | Abstand zwischen den Coupons |
Ausprobieren:
bingo-paper.htm
.
Sie können eine andere Schriftart wählen:
Da das pdfmaker.js keine Schriftarten einbinden kann, können Sie leider nur die Standard-Schriftarten verwenden.
Auch diese Parameter werden aus <input>
und <select>
-Elementen
des <form>
-Elementes entnommen.
Feldnamen | Format | Einheit | Beschreibung |
---|---|---|---|
font-name |
Wort | Schriftart | (Fontmetrik muss geladen sein) |
font-name-and-lines-per-cell |
Word:Zahl | Schriftart/Millimeter | Schriftart und Zeilen je Feld |
line-height |
Zahl | Faktor | skaliert den Zeilenabstand |
lines-per-cell |
Zahl | Zeilen | wird zur Berechnung der Fontgröße genutzt |
cell-size-mm |
Zahl | Millimeter | Mindestgröße eine Coupon-Feldes |
Bevor Sie eine Schriftart verwenden, müssen Sie die zugehörige Font-Metrik-Datei einbinden:
Schriftart | Font-Metrik-Datei |
---|---|
Helvetica |
afm-helvetica.js
|
Helvetica-Bold |
afm-helvetica-bold.js
|
Times-Roman |
afm-times-roman.js
|
Times-Bold |
afm-times-bold.js
|
Courier |
afm-courier.js
|
Courier-Bold |
afm-courier-bold.js
|
Ausprobieren:
bingo-paper-font.htm
.
Sie können eigene Texte statt der Zahlen verwenden („Bullshit-Bingo”):
Die Texte werden zwischen Wörtern und an Bindestrichen -
(Unicode \u002d)
umgebrochen.
Es gibt keine automatische Worttrennung, Trennstellen können mit
Soft-Hyphen
(Unicode \u00ad) oder mit senkrechtem Strich
(Unicode \u007c) markiert werden.
|
Texte können auf zwei Wegen angegeben werden:
Texte als Bestandteil der HTML-Seite:
Die Texte werden als die Werte von data-bingo-text-#
-Attributen des <form>
-Attributes
angegeben. Das #
steht für eine Zahl, die Zahlen müssen nicht fortlaufend
sein.
Im Attribut data-bingo-lines-per-cell
wird angegeben,
wieviele Zeilen in ein Coupon-Feld passen sollen. Daraus wird die Font-Größe
berechnet.
Attributnamen | Inhalt | Bedeutung | Default |
---|---|---|---|
data-bingo-text-{123…} |
Text | Eintrag für ein Bingofeld | |
data-bingo-lines-per-cell |
Zahl | Wieviele Textzeilen hat ein Bingofeld? | 6 |
Ausprobieren:
bingo-include-text.htm
(siehe Quellcode).
Texte werden aus externer Datei geladen:
Die URL wird im data-bingo-text-url
-Attribute des <form>
-Attributes
angegeben.
Laden von einer fremden Domain funktioniert nur, wenn Cross-Origin Resource Sharing konfiguriert ist.
Attributnamen | Inhalt | Bedeutung |
---|---|---|
data-bingo-text-url |
URL | Die Bingo-Texte werden aus dieser Datei geladen |
Ausprobieren:
bingo-xhr-text.htm
(benutzt
clickbait.txt
).
Homepage: ↗https://www.netzwolf.info/code/js/bingo/.