Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What is the formula to calculate the font-size for tags in a tagcloud?

Tags:

I have a tag cloud and I need to know how can I change the font-size for the most used tags.

I need to set a min-font-size and a max-font-size.

like image 642
BrunoLM Avatar asked Sep 15 '10 11:09

BrunoLM


2 Answers

You could use a linear or logarithmic assessment of the number of items associated with a certain tag relative to the largest tag, multiply it by the difference between minimum and maximum font sizes, then add it to the minimum font size. For example, the math in pseudocode might be:

let min = 12, max = 24
for each tag
    font = (items / items in biggest tag) * (max - min) + min
like image 100
Delan Azabani Avatar answered Sep 30 '22 23:09

Delan Azabani


To make @Delan's answer more clear I created some examples in languages I am familiar with.

Example in Javascript

var tags =
[
    { Name: "c#", Uses: 100 },
    { Name: ".net", Uses: 75 },
    { Name: "typescript", Uses: 50 },
    { Name: "lua", Uses: 50 },
    { Name: "javascript", Uses: 25 },
    { Name: "jquery", Uses: 1 },
    { Name: "c++", Uses: 0 },
];

var max = 100; // Should be computed
var min = 0;   // Should be computed

var fontMin = 10;
var fontMax = 20;

for (var i in tags)
{
    var tag = tags[i];

    var size = tag.Uses == min ? fontMin
        : (tag.Uses / max) * (fontMax - fontMin) + fontMin;
}

Example in C#

var tags = new List<Tag>
{
    new Tag { Name = "c#", Uses = 100 },
    new Tag { Name = ".net", Uses = 75 },
    new Tag { Name = "typescript", Uses = 50 },
    new Tag { Name = "lua", Uses = 50 },
    new Tag { Name = "javascript", Uses = 25 },
    new Tag { Name = "jquery", Uses = 5 },
    new Tag { Name = "c++", Uses = 5 },
};

int max = tags.Max(o => o.Uses);
int min = tags.Min(o => o.Uses);

double fontMax = 20;
double fontMin = 10;

foreach (var tag in tags)
{
    double size = tag.Uses == min ? fontMin
        : (tag.Uses / (double)max) * (fontMax - fontMin) + fontMin;
}
like image 42
BrunoLM Avatar answered Oct 01 '22 00:10

BrunoLM