开发者

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

开发者 https://www.devze.com 2023-01-16 01:19 出处:网络
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-fon开发者_如何学Pythont-size.You could use a linear or logarithmic

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-fon开发者_如何学Pythont-size.


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


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;
}


Try:

<div data-i2="fontSize:[10,30]">
    <span data-i2="rate:1">A</span>
    <span data-i2="rate:4">B</span>
    <span data-i2="rate:7">C</span>
    <span data-i2="rate:12">G</span>
    <span data-i2="rate:5">H</span>
</div>

Then

i2.emph();

http://jsfiddle.net/EUaC5/1/


here you can check how it's done in WordPress:

https://github.com/WordPress/WordPress/blob/26bda18a23174afb048afbe62296c76a62add542/wp-includes/category-template.php#L955

fontStep = (maxSize - minSize) / (maxCount - minCount);
fontSize = smallestFont + ( tagCount - minCount ) * fontStep;


I came up with this:

max_word_count = 412  # should count from list
min_word_count = 44   # should count from list
difference = max_word_count - min_word_count
min_weight = 99 / difference * min_word_count

for each tag
    weight = 99 / difference * this_word_count - min_weight + 1

Which gave me weighed words between 1 and 100. It works perfectly for me at znaci.net/arhiv.

DISCLAIMER: I am not good at math.

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号