Fix `<code>` Tag Display Issue In Foundry VTT

by Marco 46 views

Introduction

Hey guys! Have you ever noticed something funky with how code snippets appear in your Foundry VTT setup? Specifically, are your <code> tags behaving more like block elements than inline ones? If so, you're not alone! This issue, originally reported by manaflower, highlights a CSS conflict within Foundry's core stylesheet (foundry2.css) that's causing unexpected rendering of <code> elements. Let's dive into the details of this bug, understand its impact, and explore potential solutions to restore the natural inline behavior of <code> tags.

Understanding the Bug: <code> Tag Display Property

The heart of the problem lies in how Foundry VTT's CSS handles the <code> tag. By default, in standard HTML, the <code> tag is an inline element. This means it's designed to flow within the surrounding text, without forcing line breaks before or after it. Think of it as a way to highlight snippets of code within a paragraph without disrupting the text's flow. However, the foundry2.css stylesheet overrides this default behavior by setting display: block for the <code> tag. This seemingly small CSS declaration has a significant impact: it forces each <code> tag to occupy its own line, effectively turning it into a block-level element. So, instead of seeing like this within your sentence, you end up seeing

like this

which, let's be honest, isn't always what you want, especially when you are trying to keep text concise and inline.

Why is This Disruptive?

So, why is this seemingly minor CSS quirk so disruptive? Well, for starters, it breaks the expected behavior of a standard HTML element. Web developers and content creators rely on the default behavior of HTML tags to ensure consistent rendering across different platforms and browsers. When a core CSS file overrides this behavior, it can lead to unexpected and frustrating results. Imagine you're meticulously crafting a module description, a macro explanation, or a journal entry, carefully embedding code snippets within your text to provide clarity and context. Suddenly, all those inline code snippets are forced onto separate lines, disrupting the flow of your writing and making it harder for users to follow your explanations. Moreover, it can clash with custom styling you might be trying to implement in your own modules or systems, leading to CSS conflicts and debugging headaches. It also impacts readability, especially in scenarios where you want to keep code snippets concise and seamlessly integrated within the surrounding text. A block-level <code> tag can break the visual flow, making it harder for users to quickly scan and understand the content.

Impact and Scenarios

The disruptive nature of <code> having display: block manifests in various scenarios within Foundry VTT. Consider these examples:

  • Module Descriptions: Module developers often use <code> tags to highlight specific code snippets or commands within their module descriptions. When these snippets are forced onto separate lines, the descriptions become less readable and visually cluttered.
  • Macro Explanations: Similarly, when explaining how to use macros, users might embed code snippets within their instructions. The display: block override can make these explanations harder to follow, especially for users who are new to macro creation.
  • Journal Entries: Journal entries are a great way to document game sessions, share lore, or provide player instructions. Embedding code snippets within journal entries is a common practice, and the display: block issue can disrupt the flow of these entries.
  • In-Character Dialogue: While less common, some game masters might use <code> tags to represent in-character dialogue or commands. In these cases, the unexpected line breaks can detract from the immersive experience.

Real-World Examples

To illustrate the impact of this issue, let's consider a few real-world examples. Imagine you're writing a module description that includes the following sentence:

"To use this module, simply call the myFunction() function with the appropriate parameters."

With the display: block override, this sentence would render as:

"To use this module, simply call the

myFunction()

function with the appropriate parameters."

This formatting breaks the flow of the sentence and makes it harder to read. Similarly, consider a macro explanation that includes the following instruction:

"Use the /roll 1d20 + @{strength} command to roll a strength check."

With the display: block override, this instruction would render as:

"Use the

/roll 1d20 + @{strength}

command to roll a strength check."

Again, the unexpected line breaks disrupt the flow of the instruction and make it less clear.

Technical Details

Let's get a bit more technical and pinpoint where exactly this issue originates. The culprit is the foundry2.css file, which is a core stylesheet within Foundry VTT. Inside this file, you'll find a CSS rule that specifically targets the <code> tag and sets its display property to block.

Locating the CSS Rule

While the exact line number might vary depending on the Foundry VTT version, you can typically find the relevant CSS rule by searching for code { within the foundry2.css file. The rule will likely look something like this:

code {
 display: block;
 /* Other styles */
}

This seemingly simple rule is the root cause of the problem. By overriding the default display property of the <code> tag, it forces all <code> elements to render as block-level elements, regardless of their intended use.

Why Was This Rule Added?

One might wonder why this rule was added in the first place. It's possible that it was intended to address a specific styling issue or to ensure consistent rendering of code snippets in a particular context. However, without knowing the original intent, it's difficult to say for sure. Regardless of the reason, the rule has unintended consequences, as it disrupts the expected behavior of the <code> tag and can lead to formatting issues in various scenarios.

Solutions and Workarounds

Okay, so we've established that this is an issue, but what can we do about it? Thankfully, there are several solutions and workarounds you can employ to restore the inline behavior of <code> tags in your Foundry VTT setup.

1. Override with Custom CSS

The most straightforward solution is to override the problematic CSS rule with your own custom CSS. You can do this by adding a CSS rule to your game's stylesheet or to a specific module's stylesheet. The overriding rule should set the display property of the <code> tag back to inline or inline-block.

Example CSS

Here's an example of the CSS you can use:

code {
 display: inline;
}

Or, if you prefer:

code {
 display: inline-block;
}

The inline value will make the <code> tag behave exactly like a standard inline element, while the inline-block value will allow you to apply some block-level styling (such as padding and margins) to the <code> tag without forcing it onto a new line.

Where to Add the CSS

You can add this CSS to your game's stylesheet by going to the "Configure Settings" menu, selecting the "Client Settings" tab, and then adding the CSS to the "Custom CSS" field. Alternatively, if you're developing a module, you can include the CSS in your module's stylesheet.

2. Target Specific <code> Tags

If you only want to restore the inline behavior of <code> tags in specific cases, you can use CSS selectors to target those tags more precisely. For example, you could add a class to the <code> tags that you want to display inline and then use that class in your CSS rule.

Example HTML

To use this module, simply call the `<code class="inline-code">myFunction()</code>` function.

Example CSS

.inline-code {
 display: inline;
}

This approach gives you more control over which <code> tags are affected by the override.

3. Request a Change to Foundry's Core CSS

Finally, you can request a change to Foundry VTT's core CSS by submitting a bug report or feature request to the Foundry VTT developers. If enough users report the issue, they may consider removing or modifying the problematic CSS rule in a future release. When reporting, reference the original report by manaflower.

Conclusion

In conclusion, the display: block override for the <code> tag in Foundry VTT's foundry2.css stylesheet is a minor but disruptive issue that can affect the readability and flow of text in various scenarios. By understanding the root cause of the problem and employing the solutions and workarounds outlined above, you can restore the natural inline behavior of <code> tags and ensure a more consistent and user-friendly experience for yourself and your players. Happy coding, and may your inline code snippets always render as intended!

Remember: Always test your changes in a controlled environment, especially when modifying core CSS or adding custom styles. And don't hesitate to reach out to the Foundry VTT community for help and support if you encounter any issues.