This forum is now read-only. Please use our new forums at discuss.codecademy.com.
0 points
Submitted by Maciej Wiercioch
6 years ago

# Can I change the font size?

Of course you can! But you will have to dig into `bubbles.js` file and change it a bit. Before we start it is highly recommended to read: How does alphabet.js work?.

This piece of code in `bubbles.js` is responsible for drawing all the dots in our project:

``````if (document.alphabet.hasOwnProperty(cc_hex)) {
var chr_data = document.alphabet[cc_hex].P;
var bc = letterColors[ix % letterColors.length];

for (var i = 0; i < chr_data.length; ++i) {
point = chr_data[i];

g.push(new Point(point[0] + offset,
point[1],
0.0,
point[2],
makeColor(bc, point[3])));
}
offset += document.alphabet[cc_hex].W;
}``````

`point[0]` corresponds to the x coordinate of each point, `point[1]` is the y coordinate and `document.alphabet[cc_hex].W` is the width of our whole letter. These three values affects the size of our font. So we have to modify them.

It is very important to understand that we should keep correct proportions. We do not want to make a weird looking animation where every letter is three times wider than normal but height of letter is without any change - or maybe you do!.

To make sure that we are keeping aspect ratio we will create a special variable to store a multiplier - `fontSizeMultiplier`. It will work in very intuitive way. If the multiplier is equal to `2` then letters are two times larger. If it is equal to `0.5` then they are two times smaller.

To reach our goal we simply have to define our variable and assign to it desired value (in our example - `0.5`) and then multiply every decisive variable (`point[0]`, `point[1]` and `document.alphabet[cc_hex].W`). This is the code after adjustments:

``````if (document.alphabet.hasOwnProperty(cc_hex)) {

// definition of our variable
var fontSizeMultiplier = 0.5;

var chr_data = document.alphabet[cc_hex].P;
var bc = letterColors[ix % letterColors.length];

for (var i=0; i<chr_data.length; ++i) {
point = chr_data[i];

g.push(
// multiplication of x and y coordinates by defined value
new Point(point[0] * fontSizeMultiplier + offset,
point[1] * fontSizeMultiplier,

0.0,
point[2],
makeColor(bc,point[3])));
}

// multiplication of letter width by our multiplier
offset += document.alphabet[cc_hex].W * fontSizeMultiplier;
}``````

1 vote

Thanks a lot! I was looking for this!

627 points
Submitted by Gabrielle
6 years ago

Maciej Wiercioch 6 years ago

You are welcome! I’m glad it helped someone :)

Gabrielle 6 years ago

yes it’s on my website : http://www.gabrielleb.fr/EN/index.html

i tried this bit but couldn’t get it to work please help me

``````   if (document.alphabet.hasOwnProperty(cc_hex)) {

var fontSizeMultiplier = 0.5;

var chr_data = document.alphabet[cc_hex].P;
var bc = letterColors[ix % letterColors.length];

for (var i = 0; i < chr_data.length; ++i) {
point = chr_data[i];

g.push(new Point(point[0] + offset,
point[1],
0.0,
point[2],
makeColor(bc, point[3])));
}
offset += document.alphabet[cc_hex].W;
}
}``````
328 points
Submitted by Adam Paylor
6 years ago