# Manual width

Unfortunately, not everything is perfect. While working on this plugin, I spent well more than two weeks experimenting and puzzling with width calculation. Width calculation is needed, so that we can know the width of a text line in order to start a new line at the correct position:

<figure><img src="https://2056457066-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FO0fJVi4OrBJoOYrP9n9t%2Fuploads%2FwQnQf4rzBoFsC49FLENb%2Fimage.png?alt=media&#x26;token=2e16f9bd-f87c-4684-9ad8-102cc00fd8bb" alt=""><figcaption><p>All widths are correct</p></figcaption></figure>

I've figured out how to calculate it correctly for the default symbols, but legacy symbols are not so easy. Having spent countless of hours on it, I suppose there either isn't a straightforward solution or I'm just too dumb to figure it out. Either way, the situation is that some characters have wrong widths, which can cause the new lines to be offset like so:

<figure><img src="https://2056457066-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FO0fJVi4OrBJoOYrP9n9t%2Fuploads%2F3hO9Zn3MayWk98usLjXu%2Fimage.png?alt=media&#x26;token=30c18769-ffdb-4b40-b2eb-2831fc540b31" alt=""><figcaption><p>Notice how the background is smaller than it needs to be and new lines 'a' is offset</p></figcaption></figure>

In order for users to be able to fix that, I added a file where you can manually insert widths for characters. It's located in `plugins/Tooltips/.data/widths.yml` and looks somewhat like this:

```yaml
# Optional file, which allows you to specify the pixel widths of unicodes
# Note that pixels in this file can be of decimal format (1.25, 4.5 etc..)
# This helps the plugin in width calculation

'！': 2
｀: 2
ａ: 3
ｂ: 3
ｃ: 3
ｄ: 3
ｅ: 3
ｆ: 3
ｇ: 3
ｈ: 3
ｉ: 3
ｊ: 3
ｋ: 3
ｌ: 3
ｍ: 3
ｎ: 3
ｏ: 3
```



In this file, you insert a character followed by the amount of decimal pixels, which will define it's width.

Let's say we want to fix the `ﾰ` character. Best way to check if the character is broken, is to paste it a lot of times and check with `/tt sendpreset default PLAYER ﾰﾰﾰﾰﾰﾰ\na` . With that, you can see that the last `a` character becomes offset:

<figure><img src="https://2056457066-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FO0fJVi4OrBJoOYrP9n9t%2Fuploads%2Fcnr77O2qhzfyuwQNjKWI%2Fimage.png?alt=media&#x26;token=f5ecc544-ea64-41e2-85ef-b79d25ef2460" alt=""><figcaption></figcaption></figure>

To fix that, in the widths.yml file define its width like so:

```yaml
ﾰ: 2
```

After which, you can do /tt reload and try the same command again:

<figure><img src="https://2056457066-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FO0fJVi4OrBJoOYrP9n9t%2Fuploads%2FCr6PD0IYrVdBR6wXyZWo%2Fimage.png?alt=media&#x26;token=498e06af-22ca-41ef-8068-1663591adfd6" alt=""><figcaption></figcaption></figure>

As you can see, tha `a` is now aligned properly.&#x20;





### How many pixels?

If you test the character, and your `a`  goes to the right, it means that the current width is too small, so you have to try something bigger:

<figure><img src="https://2056457066-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FO0fJVi4OrBJoOYrP9n9t%2Fuploads%2F6r0c7f8Gj4epcOjrOJ84%2Fimage.png?alt=media&#x26;token=16a08af9-cd58-45a5-9ad4-a74a30850b18" alt=""><figcaption></figcaption></figure>

If `a` goes to the left, it means your width is too big:

<figure><img src="https://2056457066-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FO0fJVi4OrBJoOYrP9n9t%2Fuploads%2FvTsyZ8yBiFJnyIIPToAO%2Fimage.png?alt=media&#x26;token=2f50c38a-214f-492d-8ff4-ecf64dc01f59" alt=""><figcaption></figcaption></figure>

It's about experimentation. Try random values until you find one that aligns the `a` perfectly. You can test it easily by just editing & saving the `widths.yml` file and then reloading.

