imagettftext en unicode of symbolen
Ik probeer in een afbeelding imagecreatetruecolor() symbolen af te drukken maar het lukt niet.
Als ik afdruk via ⋐ krijg ik gewoon een rechthoekje.
Als ik afdruk van gewon karakters met een symbolfont komt er gewoon niets. Opzoekingen leert dat imagettftext niet overweg kon met symbolen maar dat is al van php 4. Ik zou denken dat ze dit al opgelost hebben.
Iemand een idee hoe ik toch mijn unicode of symbolen kan afdrukken?
Jan
Als dat lettertype de symbolen ondersteunt neem ik aan dat je gewoon de Unicode UTF-8 byte sequence kunt sturen (vanuit PHP in de functie-aanroep, als je je PHP-code hebt opgeslagen als UTF-8).
Op SO heeft iemand eerder met dit bijltje gehakt:
https://stackoverflow.com/questions/9458317/working-with-gd-imagettftext-and-utf-8-characters
En:
https://stackoverflow.com/questions/23551989/how-to-correctly-show-accents-or-special-characters-%c3%b1-in-php-gd
Toen hielp het om een UTF-8 lettertype te gebruiken.
Gewijzigd op 22/06/2023 13:20:52 door Ad Fundum
combinatie van
1 slecht font gebruikt (SEGUISYM is een goed symboolfont)
2 omzetting naar entities Je moet dus '♔' dit gebruiken.
Ik dacht dat die symbolen in ALLE standaard fonts zaten. Niet dus :)
Bedankt voor de hulp
Jan
PS alles staat altijd in utf-8. Nu toch. Ik heb mijn les geleerd in het verleden met verschillende sets
Gewijzigd op 23/06/2023 11:27:26 door Jan R
Nee, er zijn maar een paar lettertypen te vinden die alle Unicode symbolen ondersteunen. Dat komt omdat er zo'n 1,1 miljoen karakters in Unicode zitten, waardoor sommige lettertypen worden opgesplitst. Noto is zo'n voorbeeld: https://github.com/notofonts/noto-fonts
De uiteindelijke font-bestanden zijn vaak zo'n tientallen MB's per stuk (of meer).
Arial is ook zo'n font dat redelijk compleet is, van andere fonts weet ik het niet uit m'n hoofd.
En stom dat GD HTML-entiteiten verwacht in plaats van UTF-8 codering, maargoed. Het blijft behelpen. Gelukkig heb je dat uit kunnen zoeken.
Je kunt symbolen van te voren renderen (rasteriseren) naar een bitmap plaatje in GIF of PNG formaat (vanwege het doorzichtige alphakanaal). Dan hoef je maar 1x moeilijk te doen op 1 computer dat het juiste lettertype heeft.
Of je kunt een beroep doen op de clients. Als je het lettertype over het schaakbord heen zet met CSS (of zelfs gewoon in een HTML tabel) dan kan je het bijbehorende font aanbieden via CSS met @font-face.
https://www.janr.be/schaak/sc_post-gent/?page=getnotation
@ad fundum
css in een image? en @fontface?
Allen bedankt
Nee, ik bedoel dat je ook alleen de schaakstukken kan omzetten in een plaatje, en dat je die plaatjes in een tabel kunt zetten, of linken als background-image via CSS.
Maar omdat schaakstukken ook Unicode karakters zijn, kan je ze meteen gebruiken als letters, of als HTML-entities voor non-unicode uitvoer.
Of via CSS, bijvoorbeeld zo:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html>
<html>
<head>
<style>
:root { font-size: 1em; }
.bord { border-collapse: collapse; border: 1px solid grey;
background: linear-gradient(30deg, #BBB 0%, #FFF 100%);
font-family: sans-serif; color: #666; }
.bord tfoot td { box-shadow: inset 0 1px grey; text-align: center; }
.bord tbody th { border-right: 1px solid grey; font-weight: normal; }
.bord tr { height: 2em; }
.bord th, .schaakbord td { width: 2em; padding: 0;}
.bord td.wit { background: white; width: 2em; vertical-align: top; }
.bord td.zwart { background: lightgrey; vertical-align: top; }
.stuk { display: block; position: relative; font-family: myfont; }
.stuk:after { position: absolute; display: block; top: 0; left: 0;
width: 2rem; height: 2rem; overflow: hidden; color: black;
text-align: center; font-size: 1.8em; line-height: 1.1em; }
.wit.koning:after { content: '\002654'; }
.wit.koningin:after { content: '\002655'; }
.wit.toren:after { content: '\002656'; }
.wit.loper:after { content: '\002657'; }
.wit.paard:after { content: '\002658'; }
.wit.pion:after { content: '\002659'; }
.zwart.koning:after { content: '\00265A'; }
.zwart.koningin:after { content: '\00265B'; }
.zwart.toren:after { content: '\00265C'; }
.zwart.loper:after { content: '\00265D'; }
.zwart.paard:after { content: '\00265E'; }
.zwart.pion:after { content: '\00265F'; }
</style>
</head>
<body>
<table class="bord">
<tfoot>
<tr><th></th><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td><td>G</td><td>H</td></tr>
</tfoot>
<tbody>
<tr><th>8</th><td class="wit"><e class="stuk zwart toren"></e></td><td class="zwart"><e class="stuk zwart paard"></e></td><td class="wit"><e class="stuk zwart loper"></e></td><td class="zwart"><e class="stuk zwart koningin"></e></td><td class="wit"><e class="stuk zwart koning"></e></td><td class="zwart"><e class="stuk zwart loper"></e></td><td class="wit"><e class="stuk zwart paard"></e></td><td class="zwart"><e class="stuk zwart toren"></e></td></tr>
<tr><th>7</th><td class="zwart"><e class="stuk zwart pion"></e></td><td class="wit"><e class="stuk zwart pion"></e></td><td class="zwart"><e class="stuk zwart pion"></e></td><td class="wit"><e class="stuk zwart pion"></e></td><td class="zwart"><e class="stuk zwart pion"></e></td><td class="wit"><e class="stuk zwart pion"></e></td><td class="zwart"><e class="stuk zwart pion"></e></td><td class="wit"><e class="stuk zwart pion"></e></td></tr>
<tr><th>6</th><td class="wit"></td><td class="zwart"></td><td class="wit"></td><td class="zwart"></td><td class="wit"></td><td class="zwart"></td><td class="wit"></td><td class="zwart"></td></tr>
<tr><th>5</th><td class="zwart"></td><td class="wit"></td><td class="zwart"></td><td class="wit"></td><td class="zwart"></td><td class="wit"></td><td class="zwart"></td><td class="wit"></td></tr>
<tr><th>4</th><td class="wit"></td><td class="zwart"></td><td class="wit"></td><td class="zwart"></td><td class="wit"></td><td class="zwart"></td><td class="wit"></td><td class="zwart"></td></tr>
<tr><th>3</th><td class="zwart"></td><td class="wit"></td><td class="zwart"></td><td class="wit"></td><td class="zwart"></td><td class="wit"></td><td class="zwart"></td><td class="wit"></td></tr>
<tr><th>2</th><td class="wit"><e class="stuk wit pion"></e></td><td class="zwart"><e class="stuk wit pion"></e></td><td class="wit"><e class="stuk wit pion"></e></td><td class="zwart"><e class="stuk wit pion"></e></td><td class="wit"><e class="stuk wit pion"></e></td><td class="zwart"><e class="stuk wit pion"></e></td><td class="wit"><e class="stuk wit pion"></e></td><td class="zwart"><e class="stuk wit pion"></e></td></tr>
<tr><th>1</th><td class="zwart"><e class="stuk wit toren"></e></td><td class="wit"><e class="stuk wit paard"></e></td><td class="zwart"><e class="stuk wit loper"></e></td><td class="wit"><e class="stuk wit koningin"></e></td><td class="zwart"><e class="stuk wit koning"></e></td><td class="wit"><e class="stuk wit loper"></e></td><td class="zwart"><e class="stuk wit paard"></e></td><td class="wit"><e class="stuk wit toren"></e></td></tr>
</tbody>
</table>
</body>
</html>
<html>
<head>
<style>
:root { font-size: 1em; }
.bord { border-collapse: collapse; border: 1px solid grey;
background: linear-gradient(30deg, #BBB 0%, #FFF 100%);
font-family: sans-serif; color: #666; }
.bord tfoot td { box-shadow: inset 0 1px grey; text-align: center; }
.bord tbody th { border-right: 1px solid grey; font-weight: normal; }
.bord tr { height: 2em; }
.bord th, .schaakbord td { width: 2em; padding: 0;}
.bord td.wit { background: white; width: 2em; vertical-align: top; }
.bord td.zwart { background: lightgrey; vertical-align: top; }
.stuk { display: block; position: relative; font-family: myfont; }
.stuk:after { position: absolute; display: block; top: 0; left: 0;
width: 2rem; height: 2rem; overflow: hidden; color: black;
text-align: center; font-size: 1.8em; line-height: 1.1em; }
.wit.koning:after { content: '\002654'; }
.wit.koningin:after { content: '\002655'; }
.wit.toren:after { content: '\002656'; }
.wit.loper:after { content: '\002657'; }
.wit.paard:after { content: '\002658'; }
.wit.pion:after { content: '\002659'; }
.zwart.koning:after { content: '\00265A'; }
.zwart.koningin:after { content: '\00265B'; }
.zwart.toren:after { content: '\00265C'; }
.zwart.loper:after { content: '\00265D'; }
.zwart.paard:after { content: '\00265E'; }
.zwart.pion:after { content: '\00265F'; }
</style>
</head>
<body>
<table class="bord">
<tfoot>
<tr><th></th><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td><td>G</td><td>H</td></tr>
</tfoot>
<tbody>
<tr><th>8</th><td class="wit"><e class="stuk zwart toren"></e></td><td class="zwart"><e class="stuk zwart paard"></e></td><td class="wit"><e class="stuk zwart loper"></e></td><td class="zwart"><e class="stuk zwart koningin"></e></td><td class="wit"><e class="stuk zwart koning"></e></td><td class="zwart"><e class="stuk zwart loper"></e></td><td class="wit"><e class="stuk zwart paard"></e></td><td class="zwart"><e class="stuk zwart toren"></e></td></tr>
<tr><th>7</th><td class="zwart"><e class="stuk zwart pion"></e></td><td class="wit"><e class="stuk zwart pion"></e></td><td class="zwart"><e class="stuk zwart pion"></e></td><td class="wit"><e class="stuk zwart pion"></e></td><td class="zwart"><e class="stuk zwart pion"></e></td><td class="wit"><e class="stuk zwart pion"></e></td><td class="zwart"><e class="stuk zwart pion"></e></td><td class="wit"><e class="stuk zwart pion"></e></td></tr>
<tr><th>6</th><td class="wit"></td><td class="zwart"></td><td class="wit"></td><td class="zwart"></td><td class="wit"></td><td class="zwart"></td><td class="wit"></td><td class="zwart"></td></tr>
<tr><th>5</th><td class="zwart"></td><td class="wit"></td><td class="zwart"></td><td class="wit"></td><td class="zwart"></td><td class="wit"></td><td class="zwart"></td><td class="wit"></td></tr>
<tr><th>4</th><td class="wit"></td><td class="zwart"></td><td class="wit"></td><td class="zwart"></td><td class="wit"></td><td class="zwart"></td><td class="wit"></td><td class="zwart"></td></tr>
<tr><th>3</th><td class="zwart"></td><td class="wit"></td><td class="zwart"></td><td class="wit"></td><td class="zwart"></td><td class="wit"></td><td class="zwart"></td><td class="wit"></td></tr>
<tr><th>2</th><td class="wit"><e class="stuk wit pion"></e></td><td class="zwart"><e class="stuk wit pion"></e></td><td class="wit"><e class="stuk wit pion"></e></td><td class="zwart"><e class="stuk wit pion"></e></td><td class="wit"><e class="stuk wit pion"></e></td><td class="zwart"><e class="stuk wit pion"></e></td><td class="wit"><e class="stuk wit pion"></e></td><td class="zwart"><e class="stuk wit pion"></e></td></tr>
<tr><th>1</th><td class="zwart"><e class="stuk wit toren"></e></td><td class="wit"><e class="stuk wit paard"></e></td><td class="zwart"><e class="stuk wit loper"></e></td><td class="wit"><e class="stuk wit koningin"></e></td><td class="zwart"><e class="stuk wit koning"></e></td><td class="wit"><e class="stuk wit loper"></e></td><td class="zwart"><e class="stuk wit paard"></e></td><td class="wit"><e class="stuk wit toren"></e></td></tr>
</tbody>
</table>
</body>
</html>
Wanneer je het lettertype wilt veranderen (ook van de schaakstukken) kan je in CSS met @font-face een eigen font defineren, voor gebruik in de font-family eigenschap. Er is al een site die dat helemaal uitlegt: https://www.stoerebinken.nl/font-face . Dat is vooral handig als jij een lettertype hebt waarvan je niet zeker weet of de ander dat ook heeft. Bijvoorbeeld omdat die op een Mac werkt, of het lettertype nog niet heeft geïnstalleerd.
Toevoeging op 03/07/2023 15:58:01:
Owh en tekst verticaal maken kan ook met CSS:
Code (php)
1
<h2 style="transform-origin: 50%; transform: rotateZ(270deg); ">Zin in een partijtje schaak?<br>Je bent welkom bij onze schaakclub!</h2>
Scheelt weer een afbeelding.
Toevoeging op 03/07/2023 16:00:29:
Owh en je kunt met CSS alles filteren wat je niet wilt printen:
Code (php)
1
2
3
4
5
6
2
3
4
5
6
@media print {
.hoofdmenu,
.en_al_het_overbodige {
display: none;
}
}
.hoofdmenu,
.en_al_het_overbodige {
display: none;
}
}
Ad Fundum op 23/06/2023 13:41:04:
Nee, er zijn maar een paar lettertypen te vinden die alle Unicode symbolen ondersteunen. Dat komt omdat er zo'n 1,1 miljoen karakters in Unicode zitten, waardoor sommige lettertypen worden opgesplitst.
Gelukkig heb je niet alle Unicode-karakters nodig, maar slechts 2 keer 6 schaakstukken. Die speurtocht heeft iemand al eens opgelost:
Unicode Fonts with Chess Piece Images
Je kunt ook uitwijken naar speciale font stacks zoals Font Awesome (FA):
https://codepen.io/brandonmcconnell/pen/ZrZYOO
Gewijzigd op 04/07/2023 08:13:22 door Ward van der Put
Bijvoorbeeld een schaakspel in het Klingon!
- https://en.wikipedia.org/wiki/Klingon_scripts
- https://www.evertype.com/standards/csur/klingon.html
Gewijzigd op 04/07/2023 11:54:48 door Ad Fundum