Kevin Powell - Community•2y ago

padEnd not padding equally among multiple lines

Why would this code generate the screenshotted output (not printing directly below HeroicFeats but one indent (tab) less?

return `${"Sanctuary".padEnd(15, ' ')}\t\tHeroicFeats
----------------
${this.sanctuary.pools[0].toString().padEnd(15, ' ')}\t\t${this.heroicFeats.platforms[0]}

return `${"Sanctuary".padEnd(15, ' ')}\t\tHeroicFeats
----------------
${this.sanctuary.pools[0].toString().padEnd(15, ' ')}\t\t${this.heroicFeats.platforms[0]}

3 Replies

denertogOP•2y ago

never mind, this.sanctuary.pools[0].toString() makes use of chalkmethods (https://github.com/chalk/chalk) which doens't support String.prototype methods, so I'm assuming it's output doesn't either

GitHub

GitHub - chalk/chalk: 🖍 Terminal string styling done right

🖍 Terminal string styling done right. Contribute to chalk/chalk development by creating an account on GitHub.

WebMechanic•2y ago

put the output in a template string first and use your string methods on the result, i.e.

`${this.sanctuary.pools[0]}`
  .padEnd(15, ' ')
  .concat(`\t\t${this.heroicFeats.platforms[0]}`);

`${this.sanctuary.pools[0]}`
  .padEnd(15, ' ')
  .concat(`\t\t${this.heroicFeats.platforms[0]}`);

the output also contains ANSI color sequences which add to the overall string's length but vanish when rendered on the console so it might be "too long" to allow padding with these color sequences still inside. "\x1b[34mHi\x1b[0m" becomes a coloured Hi

denertogOP•2y ago

Yeah, fixed it by calculating the length of the unstyled string and then add the padding myself with a utility method. The original string needs different colors at the same time, so coloring afterwards is not an option

Gaming

Programming

padEnd not padding equally among multiple lines