Add white-space: nowrap; to inline code (single backticks) snippets

[DannyBen]

I believe any string inside single backticks should be set with white-space: nowrap; CSS directive. Otherwise, it looks like a bug when it breaks.

Actual

Expected

I know I can obtain this by placing strategic newlines (double space endings), but this happens in other situations where I have less control over (e.g. in table cells).

[geoffreymcgill]

In the specific scenario you presented, preventing the <code> tags from wrapping does improve readability, although there are easily scenarios where readability would be significantly impaired.

For example, on a mobile device, it would be easy to configure an inline code block that was wider than the viewport. This would cause horizontal scrolling in the browser as the extra long string would not wrap.

The following sample creates an extra long inline code block and the screen capture below demonstrates how the page width is blown out.

string: `<string>` - `Add any other custom set directive, for example strict: set -o pipefail`

Screen.Recording.2023-03-03.at.11.17.24.PM.mov

There are options if you would like to override the default behaviour of Retype to force nowrap of inline <code> blocks.

Option 1

Add a global css override.

Within your project's _includes/head.html file, add the following custom <style> tag to globally force all inline code within the main content region to not wrap.

<style>
    main code {
        white-space: nowrap; 
    }
</style>

Option 2

Manually override a specific inline code sample by appending {style="white-space: nowrap;"}.

Using your original sample, the override would be added as follows:

`strict: set -o pipefail`{style="white-space: nowrap;"}

Option 3

A syntactic simplification of Option 2 by using Templating within Retype to create a global variable to be applied selectively.

Within your project's retype.yml file, add the following data config section:

data:
  nowrap: '{style="white-space: nowrap;"}'

Then in your content, you manually apply the nowrap template variable:

`strict: set -o pipefail`{{ nowrap }}

I wouldn't be in support of forcing nowrap by default, but you have a few options if you want to override the default behaviour.

Hope this helps.

[DannyBen]

Nice. Option 3 is very clean. Couldn't find it in the docs searched for data)
I will try it, thanks.

[DannyBen]

@geoffreymcgill - adding this works locally without a problem, but breaks GitHub Actions build:

https://github.com/DannyBen/bashly-book/actions/runs/4329837973/jobs/7560660259

Just to be sure its not something unrelated, I removed it, and it succeeded, and added it again and it fails.

[geoffreymcgill]

Confirmed. I was able to reproduce the error. It should work, so there is a defect somewhere. We are trying to find the problem.

For the moment, I don't have a work-around if you are using the data template variable within the retype.yml file. None of my escaping attempts are working.

See also

• Build breaks when data and --override present  #435

[DannyBen]

Its fine - I used option two of inline styling for now. When it is fixed, I will switch to the cleaner data syntax.
Seems like something else is parsing for {{...}}.

[geoffreymcgill]

We found and fixed the bug. It was not obviously reproducible locally because the --override command needed to be used at the same time, which is used in GitHub Action.

Unfortunately, there is no work-around, but we are trying to get Retype v3 released as soon as possible and will include this fix.