Discord.js embed width is unreliable

Question

I am using Discord.js library to create a discord bot. Whenever I am sending an embedded message to a text channel, its width keeps changing with different data.

const celestialObject = new MessageEmbed()
            .setColor("#F0386B")
            .setTitle(
              res.data.name == res.data.englishName
                ? res.data.englishName
                : `${res.data.englishName} (${res.data.name})`
            )
            .attachFiles(attachment)
            .setThumbnail("attachment://logo.png")

            .addFields(
              {
                name: "```Density```",
                value: res.data.density.toFixed(2) + " g/cm^3",
                inline: true,
              },
              {
                name: "```Gravity```",
                value: res.data.gravity + " m/s^2",
                inline: true,
              },
              {
                name: "```Moons```",
                value: res.data.moons ? Object.keys(res.data.moons).length : 0,
                inline: true,
              },
              {
                name: "```Mass```",
                value: `
                    ${res.data.mass.massValue.toFixed(2)}^
                    ${res.data.mass.massExponent} kgs
`,
                inline: true,
              },
              {
                name: "```Escape Velocity```",
                value: (res.data.escape / 1000).toFixed(1) + " km/s",
                inline: true,
              },
              {
                name: "```Orbital revolution```",
                value: res.data.sideralOrbit.toFixed(2) + " days",
                inline: true,
              },
              {
                name: "```Rotation speed```",
                value: (res.data.sideralRotation / 24).toFixed(2) + " days",
                inline: true,
              },
              {
                name: "```Radius```",
                value: res.data.meanRadius.toFixed(2) + " kms",
                inline: true,
              }
            )
            .setTimestamp()
            .setFooter(
              "Generated by astronomia with Solar System OpenData API",
              "https://api.le-systeme-solaire.net/assets/images/logo.png"
            );
          if (images[args[0]].description) {
            celestialObject
              .setDescription(`\`\`\` ${images[args[0]].description}\`\`\``)
              .setImage(images[args[0]].link);
          }
          if (res.data.discoveredBy) {
            celestialObject.addFields({
              name: "```Discovered By```",
              value: res.data.discoveredBy,
              inline: true,
            });
          }
          if (res.data.discoveryDate) {
            celestialObject.addFields({
              name: "```Discovered On```",
              value: res.data.discoveryDate,
              inline: true,
            });
          }
          message.channel.send(celestialObject);

With this code I'm getting following results.

Here width of embed is more.

Here width of embed is less.

How can I get maximum width every time? I looked into discord.js documentation and couldn't find anything.

Ingeringersoll

I don't think you can, discord embeds always take as much space as they need. Not more. I assume that has something to do with discord also being available on mobile. – Hercule

Answer 1

Another possible way can be to insert a 1px x some large value transparent image (you can generate one from here) in the message. I haven't used DiscordJS, but in simple webhook format it will be something like:

const embed = { // ...
  image: {
    url: 'https://i.sstatic.net/Fzh0w.png'
  }
}

While developing the bot, you can use some free service like Discohook to visually test what your message will look like.

Benefits of using this workaround over the one suggested by chan kelvin are:

1. You need not to worry about other text on footer like timestamp.
2. If you don't add the spaces to the footer, instead to the description itself, then it will also do the above, but will look somewhat odd because of the more height (16px vs 1px + some padding).
   • Note that if you try creating fixed-width title/author name, then the space will also be hyperlinked (+ underlined).

Drawback: On mobile client, even the transparent image is slightly visible! :/

PS:

1. You need to modify the method given by chan to use \u2800 (Braille Pattern Blank) instead of ideographic space, as the latter one is now discarded by Discord.
2. You can use my method even if you have added other image in the embed. Discord permits adding up to 4 images per embed if its URL is set.

Blow

Answer 2

Its happening because of the code blocks you have used its weird because I've noticed that as well, not sure why it happening though.

If you want to stop your lines from breaking -

   {
     name: "```Orbital \n revolution```",
     value: res.data.sideralOrbit.toFixed(2) + " days",
     inline: true,
   }

\n breaks the line I've used spaces around it so that its more clear in you code you can use Orbital \nrevolution

Ichthyosis

Answer 3

You can pad the footer with a combination of spaces and zero-width spaces ​ to a fixed length. This approach produces a wider embed than 1px height image. Another advantage is that if you use a footer, this method doesn't add any unnecessary vertical space:

const MAX_EMBED_WIDTH = 164

const embed = new EmbedBuilder()
    .setTitle('Example')
    .setFooter({ text: `Your footer text`.padEnd(MAX_EMBED_WIDTH) + '\u200B' });

Dostie