imagettftext en unicode of symbolen

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Jan R

Jan R

22/06/2023 11:25:28
Quote Anchor link
Hoi

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
 
PHP hulp

PHP hulp

25/11/2024 02:41:52
 

22/06/2023 13:18:05
Quote Anchor link
Welk lettertype geef je op aan GD met imagettftext ?
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
 
Jan R

Jan R

23/06/2023 11:26:45
Quote Anchor link
Gevonden :)
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
 

23/06/2023 13:41:04
Quote Anchor link
Fijn dat het is gelukt.

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.
 
Jan R

Jan R

23/06/2023 15:43:31
Quote Anchor link
Laat nu net ariel 1 van de standaard fonts zijn. Ook geen schaakstukken.
 

23/06/2023 16:08:39
Quote Anchor link
Er zijn nog meer wegen.

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.
 
Jan R

Jan R

03/07/2023 11:49:29
Quote Anchor link
ik denk dat alles gelukt is :)
https://www.janr.be/schaak/sc_post-gent/?page=getnotation

@ad fundum
css in een image? en @fontface?

Allen bedankt
 

03/07/2023 15:51:51
Quote Anchor link
Leuke site!

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)
PHP script in nieuw venster Selecteer het PHP script
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
<!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>

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)
PHP script in nieuw venster Selecteer het PHP script
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)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
@media print {
  .hoofdmenu,
  .en_al_het_overbodige {
    display: none;
  }
}
 
Ward van der Put
Moderator

Ward van der Put

04/07/2023 08:07:39
Quote Anchor link
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
 

04/07/2023 11:53:15
Quote Anchor link
@Ward, je mist dan wel de mogelijkheden die je anders wel zou hebben met Unicode, mits het lettertype het ondersteunt.
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
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.