discordjs / guide

The official guide for discord.js, created and maintained by core members of its community.
https://discordjs.guide
MIT License
1.57k stars 2.31k forks source link

Update information about blank fields in embed guide #1572

Open ThatsEmbarrassing opened 3 months ago

ThatsEmbarrassing commented 3 months ago

Is your feature request related to a problem? Please describe.

Discord has no feature to create embeds with multiple columns on each row(e.g. 2x2), so the guide suggests using "blank fields". In order to use them, you need to write something like "\u200B" in both name and value fields. But this looks actual awful.

There's a better alternative. You can use "\t" instead of the way described in the current guide. It looks a little prettier and an embed has less space between rows.

So my suggestion is replacing "\u200B" to "\t" in the guide, because this looks nicer.

Describe the solution you'd like

Replace "\u200B" to "\t" escaped symbol in the guide about creating embeds in discord.js.

Describe alternatives you've considered

No response

Additional notes

No response

Qjuh commented 3 months ago

Can you show a screenshot and code of what you mean when you say „looks awful“ and „prettier“? The guide showcases an empty non-inline field while you seem to be talking about empty inline fields to have three inline fields as expected from discord.

ThatsEmbarrassing commented 3 months ago

Sure I can!

image

And code:

const withU200B = new EmbedBuilder().setTitle('with \\u200B').setFields(
            {
                name: 'field 1',
                value: 'field 1',
                inline: true,
            },
            {
                name: 'field 2',
                value: 'field 2',
                inline: true,
            },
            {
                name: '\u200B',
                value: '\u200B',
            },
            {
                name: 'field 3',
                value: 'field 3',
                inline: true,
            },
            {
                name: 'field 4',
                value: 'field 4',
                inline: true,
            },
        );

const withT = new EmbedBuilder().setTitle('with \\t').setFields(
            {
                name: 'field 1',
                value: 'field 1',
                inline: true,
            },
            {
                name: 'field 2',
                value: 'field 2',
                inline: true,
            },
            {
                name: '\t',
                value: '\t',
            },
            {
                name: 'field 3',
                value: 'field 3',
                inline: true,
            },
            {
                name: 'field 4',
                value: 'field 4',
                inline: true,
            },
        );
Qjuh commented 3 months ago

Make the third field inline too…

ThatsEmbarrassing commented 3 months ago

Make the third field inline too…

Are you meaning the next field after "field 2"?. If you are, there's no point in doing this way.

This "empty" field makes new line in an embed, so putting "field 3" and "field 4", what are both inline, in the next line becomes possible. If I make the "empty" field inline too, the embed will be broken. That's obviously not the expected behaviour I'd like.

Qjuh commented 3 months ago

In what way would it be broken? Embeds have 3 fields per line when inline. So the third (empty) field being inline is exactly what you need to have two columns of fields without any additional space in between. Did you try it or just assume it to be broken if you did?

ThatsEmbarrassing commented 3 months ago

I did try this when I was looking for the way how to put multiple columns in each row. However, the columns are unevenly aligned with each other in both ways: using "\u200B" and "\t".

Here's a screenshot how it looks like:

const withU200B = new EmbedBuilder().setTitle('with \\u200B').setFields(
            {
                name: 'field 1',
                value: 'field 1',
                inline: true,
            },
            {
                name: 'field 2',
                value: 'field 2',
                inline: true,
            },
            {
                name: '\u200B',
                value: '\u200B',
                inline: true,
            },
            {
                name: 'field 3',
                value: 'field 3',
                inline: true,
            },
            {
                name: 'field 4',
                value: 'field 4',
                inline: true,
            },
        );

const withT = new EmbedBuilder().setTitle('with \\t').setFields(
            {
                name: 'field 1',
                value: 'field 1',
                inline: true,
            },
            {
                name: 'field 2',
                value: 'field 2',
                inline: true,
            },
            {
                name: '\t',
                value: '\t',
                inline: true,
            },
            {
                name: 'field 3',
                value: 'field 3',
                inline: true,
            },
            {
                name: 'field 4',
                value: 'field 4',
                inline: true,
            },
        );
Qjuh commented 3 months ago

Missing the third field in the second row