[PHP] lettertype grootte automatisch aanpassen (Tag Cloud)*

[Martine]

Beste Tweakers,

Natuurlijk heb ik al even gezocht, desondanks kan ik de oplossing niet vinden of bedenken. Dit komt ook mede omdat ik niet helemaal weet hiet het precies heet.
Om een lang verhaal kort te maken, er staat een prachtig voorbeeld op deze pagina, de Top Tags van de tags van Tweakers.net. Ik heb een vrij stukje ruimte op een website waar dit soort tags mooi kunnen staan. Hoe vaker de tag gebruikt is, des te groter wordt de lettertype.

PHP:

//met deze query worden de gebruikte tags uitgelezen.
SELECT COUNT(tags.id) AS num, tags.name FROM tags_koppel LEFT JOIN tags ON tags_koppel.tagsid = tags.id GROUP BY tags.id ORDER BY tags.name

De meest voorkomende tag komt 14 keer voor, de minst voorkomende tag slechts 1 keer. Nu kan ik natuurlijk zeggen dat het lettertype 14px moet worden, als ik dat zou doen zou ik over een aantal weken tegen de lamp aanlopen omdat de tag dan 1001 keer voorkomt, en niet meer op het scherm past...

Ik heb ook al gedacht om het aantal (num) te vermenigvuldigen en vervolgens te delen, dit helpt allemaal niet echt. Hoe kan ik voorkomen dat het lettertype minimaal 8px en maximaal 16px kan worden? Wie kan mij even een goed idee of een fijne tip onder de knieen schuiven?

[ Voor 3% gewijzigd door Martine op 12-09-2007 03:09 . Reden: kleine toevoeging gedaan ]

[CodeCaster]

Ik heb ook al gedacht om het aantal (num) te vermenigvuldigen en vervolgens te delen, dit helpt allemaal niet echt.

Dat is toch echt wat het moet worden. Bijvoorbeeld, je rekent het aantal keer voorkomen van een keyword in procenten van het totaal aantal weergegeven tags uit, dan zorg je dat het betreffende aantal procenten in een door jou bepaalde range valt.

Stel, je gaat uit van minimaal 6px en maximaal 26px, dan is elke 5% 1px erbij. Een tag die 1% voorkomt heeft 6px, en een tag die in 50% van de zoekqueries voorkomt krijgt 16px.

Het is trouwens grootte.

[ Voor 3% gewijzigd door CodeCaster op 12-09-2007 03:15 ]

[Martine]

Bedankt voor het snelle antwoord, ik heb er al wat anders op bedacht om de procenten te berekenen maar volgens mij gaat dit precies verkeerd om. Want de meest voorkomende tag, die 14 keer voorkomt, heeft een procent getal van 7.14

De tags die maar een keer voorkomen hebben allemaal 100.00 procent en die 5 keer voorkomt, 20 procent. Wordt er nu precies andersom gerekend?

PHP:

SELECT tags.id, tags.id / SUM(tags.id) * 100 AS perc, COUNT(tags.id) AS num, tags.name FROM tags_koppel, tags WHERE tags_koppel.tagsid = tags.id GROUP BY tags.id ORDER BY tags.name

[Voutloos]

Schrijf de berekening gewoon met een paar simpele voorbeeld waarden uit, voordat je de moeite neemt om het in sql op te schrijven. Je wilt gewoon de populairste tag 100% extra font-size mee geven en de rest naar ratio. Als je hier rustig over nadenkt, moet je er echt wel uitkomen.

[Verwijderd]

Ik zou eens gaan zoeken op "tag cloud" algorithm

[Niemand_Anders]

Martine schreef op woensdag 12 september 2007 @ 04:02:
Want de meest voorkomende tag, die 14 keer voorkomt, heeft een procent getal van 7.14

De tags die maar een keer voorkomen hebben allemaal 100.00 procent en die 5 keer voorkomt, 20 procent. Wordt er nu precies andersom gerekend?

PHP:

SELECT tags.id, tags.id / SUM(tags.id) * 100 AS perc, COUNT(tags.id) AS num, tags.name FROM tags_koppel, tags WHERE tags_koppel.tagsid = tags.id GROUP BY tags.id ORDER BY tags.name

Je moet count delen door het totaal (sum).

Daarnaast moet je op basis van een percentage range bepalen welke fontgrote (css class) de betreffende span krijgt. Bijvoorbeeld bij 100-75% krijgt de span css class 'cloudsize1', 75-50% krijgt 'cloudsize2'. Als je later de percentages dan veranderd komen er alleen cloudsizes bij.

Als je nooit meer dan 6 groottes defineerd zou je ook de HTML element H1 t/m H6 gebruiken. Je moet dan wel even de display style op inline zetten omdat ze anders niet naast elkaar komen te staan.

[sopsop]

Niemand_Anders schreef op woensdag 12 september 2007 @ 08:52:
[...]
Als je nooit meer dan 6 groottes defineerd zou je ook de HTML element H1 t/m H6 gebruiken. Je moet dan wel even de display style op inline zetten omdat ze anders niet naast elkaar komen te staan.

Ik zou hier nooit H1 t/m H6 voor gebruiken. Ofwel de achors voorzien van een leuke classname, ofwel een unordered list. Semantisch gezien is er wel wat voor de ul te zeggen.

[OkkE]

Niemand_Anders schreef op woensdag 12 september 2007 @ 08:52:
Als je nooit meer dan 6 groottes defineerd zou je ook de HTML element H1 t/m H6 gebruiken. Je moet dan wel even de display style op inline zetten omdat ze anders niet naast elkaar komen te staan.

H1 t/m H6 elementen zijn voor headings, ik zou dan ook niet aanraden om ze voor je tagcloud te gebruiken. Wat eventueel wel kan, is je belangrijkste tags in een strong-element zetten, en die er onder in een em-element. Verder zou ik je voor classNames iets als 'top', 'second', 'third', .. of iets gebruiken. Zodat tenminste duidelijk is wat elke class betekend. De class 'tagcloud1' zegt me niets..

----

Ik heb zelf ook al eens nagedacht over een tagcloud om mijn website. Ik denk dat je eerst moet kiezen wat de min. font-size en max. font-size zijn, die je wil gebruiken. Daarna kan je kijken hoeveel stappen je kan maken. Of anders om, hoeveel stappen wil je maken? Al dat bekend is, kan je per tag berekenen hoeveel % hij voorkomt, en afhankelijk daarvan in één van de stappen indelen.

-- edit --

@sopsop;
Dan zou ik eerder nog een OL kiezen. De volgorde in namelijk in dit geval weldegelijk van belang.

[ Voor 5% gewijzigd door OkkE op 12-09-2007 09:25 ]

[Cavorka]

Ik heb het zo gedaan:

PHP:

6 + round(($SearchCloudSet[$index]['TheCount'] / $CloudMax) * 36, 0)

TheCount is dus het aantal keer dat een entry voorkomt (in mijn geval hoe vaak er gezocht is op een bepaalde term), $CloudMax is het maximum aantal (eerste entry in je lijst als je DESC sorteert in je MySQL query). Dus ik 'normaliseer' alles naar 1 (delen door het maximum) en vermenigvuldig met 36 (maximum font grootte 36 + 6 = 42). Op deze manier zit je niet vast een aantal classnames, maar kan je met style='font-size: **px' alle font groottes die je maar wilt krijgen.

[OkkE]

Cavorka schreef op woensdag 12 september 2007 @ 13:57:
[...] (eerste entry in je lijst als je DESC sorteert in je MySQL query). [...]

Misschien slimmer om hier een COUNT te gebruiken, om te voorkomen dat je scheve waardes krijgt wanneer er records verwijderd worden.

[...] Op deze manier zit je niet vast een aantal classnames, maar kan je met style='font-size: **px' alle font groottes die je maar wilt krijgen. [...]

Dat kan inderdaad een voordeel zijn. Persoonlijk zou ik toch kiezen voor classnames, omdat ik inline styles niet zo netjes vind. Maar het heeft beide zo zijn voor- en nadelen.

[Duroth]

[...] Op deze manier zit je niet vast een aantal classnames, maar kan je met style='font-size: **px' alle font groottes die je maar wilt krijgen. [...]

De TS heeft het over een font size range van 9px (8 t/m 16), dat zou dus betekenen dat er maar 9 classes aangemaakt hoeven te worden. Scheelt in de code, en staat een stuk netter in de bron.

Verder heeft Cavorka helemaal gelijk, om het even simpel te houden:

PHP:

$Font_Size = ($Huidige_Tag / $Meest_Voorkomende_Tag) * 8 + 8;
round($Font_Size,0);

Vreselijke psuedo-code, maar het laat wel zien hoe het ongeveer werkt.

[Cavorka]

OkkE schreef op woensdag 12 september 2007 @ 16:04:
[...]
Misschien slimmer om hier een COUNT te gebruiken, om te voorkomen dat je scheve waardes krijgt wanneer er records verwijderd worden.

Dat was het idee: een COUNT met GROUP BY, daar op sorteren (dat zijn namelijk de waardes die je toch al wilt hebben) en dan de eerste pakken zodat je JUIST niet nog een query hoeft te doen.

Classnames is netter, maar zit je dus vast aan hoeveel classes je hebt, ipv de vrijheid hebben van zoveel font groottes als je wilt. Staat wat inline CSS tegenover, maarja... schoonheid van de sourcecode is alleen aan /13 en /14 mensen besteedt.

[Martine]

Allemaal bedankt voor de reacties, met de reply van Cavorka ben ik eruit gekomen!

Het is inderdaad niet zo netjes om inline style gebeuren te gebruiken, maar een pagina uitgezonderd mag geen problemen opleveren. Als ik eens niets te doen heb ga ik het wel oplossen

Nu wil ik het natuurlijk meteen oplossen, maar stel nou dat er tags zijn die maar een keer voorkomen, en over een tijdje tags zijn die 350 keer voorkomen. Dan loop ik toch tegen het probleem aan als deze niet groter worden dan de aangegeven grootte in de css? Wordt het verschil dat niet te groot?

PHP:

if ($perc > 84)
    $font = 8;
elseif ($perc > 72)
    $font = 7;
elseif ($perc > 60)
    $font = 6;
elseif ($perc > 48)
    $font = 5;
elseif ($perc > 36)
    $font = 4;
elseif ($perc > 24)
    $font = 3;
elseif ($perc > 12)
    $font = 2;
else
    $font = 1;

$perc is het aantal procenten, een tag die een keer voorkomt is 1%, een die 5 keer voorkomt is 3%, beide vallen dus in de else, want deze is niet groter dan 12. Op deze manier komt er nu nog geen verschil, eigenlijk moet deze if,elseif,else tabel meegroeien of denk ik nu weer veel te moeilijk?

[ Voor 203% gewijzigd door Martine op 13-09-2007 03:47 . Reden: nog meer toevoegen.... ]

[bigbeng]

Je zult zelf moeten bepalen hoe je verloop in percentages is. Als jij het lineair verdeelt heb je het probleem zoals je aangeeft, omdat elk hokje (fontgrootte) een vaste grootte in percentage heeft. Maar dat is toch ook logisch? Op de pagina die jij als voorbeeld aangeeft werkt het ook op die manier zo te zien. De meeste tags verschillen niet van elkaar in grootte, terwijl ze ongetwijfeld toch verschillende percentages hebben.

[Voutloos]

Waarom maak je nou zo'n grote contructie als je al Duroth in "[PHP] lettertype grootte automatisch aan..." als voorbeeld gezien hebt? Doet hetzelfde, maar is imo wel met een stuk mooiere code.

Nofi, maar deze sommetjes zijn allemaal brugklas wiskunde (zelfs al zou je naar een logaritmische schaal overstappen), ik kan er echt niet bij dat dat te lastig is voor een programmeur. Als je nu nog niet een goede verzameling tags hebt, implementeer het dan gewoon volgens een van deze eenvoudige manieren, de layout kan je altijd nog wel bijschaven als je tagcloud er later niet meer goed uit ziet.

[OkkE]

Hoezo is er dan nu nog geen verschil? Als je een tag hebt met 1% en een tag met 3%, dan zijn er toch nog meer tags die voor de overige 94% zorgen?

[Verwijderd]

Psst Martin, kijk eens naar een switch and case construction ipv zoveel IF's te nesten

[Verwijderd]

Verwijderd schreef op donderdag 13 september 2007 @ 15:37:
Psst Martin, kijk eens naar een switch and case construction ipv zoveel IF's te nesten

Tsja dat is natuurlijk om het even. Als je van een dergelijk constructie af wilt dan kun je daar beter een Map/Dictionary voor gebruiken. Of zoals php dat lekker knullig noemt: een array.

[Verwijderd]

array,map,dictonary,lookup table en zo kun je nog wel veel meer hippe woordjes voor hetzelfde oude principe bedenken Niks knulligs aan een array, zo heten data verzamelingen als sinds het begin der programmacode hoor.

[Janoz]

Een array is niet hetzelfde als een map, dictionary of lookup table. Een Array is eerder hetzelfde als een List. Nee, een array is niet knullig. Het knullige waar Mark op doelt is dat in php een map een array genoemd wordt.

Sinds het begin der programmering worden verzamelingen van elementen collections genoemd. Deze zijn onder te verdelen in maps (key value pairs), lists (rij elementen waarbij de volgorde betekenis heeft), sets (verzameling unieke elementen waarbij volgorde niet van belang is) en bags (verzameling elementen waarbij volgorde niet van belang is).

[ Voor 44% gewijzigd door Janoz op 13-09-2007 16:18 ]

[Verwijderd]

Verwijderd schreef op donderdag 13 september 2007 @ 16:11:
array,map,dictonary,lookup table en zo kun je nog wel veel meer hippe woordjes voor hetzelfde oude principe bedenken Niks knulligs aan een array, zo heten data verzamelingen als sinds het begin der programmacode hoor.

Een Map/Dictionary is een key-value pair en een array is dat sinds het begin der programmacode niet. Je kunt namelijk de positie van een element in een array berekenen door:
geheugenadress + (sizeof(arraytype) * index)

Dat gaat je met een key niet echt lukken

edit:
Maaaaaaar om dus het if-else-if-else of case-switch gedoe te omzijlen kun je ook een Map in elkaar klussen.
Dan hoef je, kort door de bocht, enkel iets te doen als:
return $my_map[$value];

[ Voor 14% gewijzigd door Verwijderd op 13-09-2007 16:18 ]

[Martine]

OkkE schreef op donderdag 13 september 2007 @ 09:24:
Hoezo is er dan nu nog geen verschil? Als je een tag hebt met 1% en een tag met 3%, dan zijn er toch nog meer tags die voor de overige 94% zorgen?

Dat klopt, ik bedoel meer als er nu niet zoveel verschil zit tussen sommige woorden. Ik heb het nu opgelost met verschillende kleuren, ook zal ik de pagina goed in de gaten houden. Mocht het om wat voor maffe reden - naar mijn mening - niet goed werken, dan kan ik er altijd nog even mee stoeien. Iedereen in ieder geval bedankt!

Het switch statement is mij bekend, of hoe je het ook maar wilt noemen...

[OkkE]

Ik snap het probleem niet helemaal. Als er niet veel verschil tussen woorden zit (verschil qua aantal keer dat die voorkomt, neem ik aan?), dan moet er toch ook visueel (bijna) geen verschil in zitten?

[Martine]

Inderdaad, er zitten woorden bij die komen twee keer voor, en andere woorden vier keer. Hier zit nu een heel klein beetje kleurverschil in, meer niet.