Conditional <var> or <div> in formatReplaceabledHTML

[wking]

formatReplaceabledHTML currently uses a wrapping <span>, but that doesn't work if the content is not phrasing content. For example, if the <alt> wraps a <p> or <ul> (which are flow content, and which is currently allowed), then we should be using a <div> or similar instead of a <span>. I expect we'll need to parse the contents to make this switch, and that's beyond my Java ability, so I'm filing this as an issue instead of a PR ;).

[wking]

And <var> would be a better choice for the phrasing content case. Then we don't have to style that case ourselves (unless we want to). It's such a good match, I'm tempted to ask for <alt …> → <var …> in license-list-XML…

[goneall]

I'm tempted to ask for <alt …> → <var …> in license-list-XML

I tried that one - they wore me out and I ended up agreeing with <alt ...>

[goneall]

I hacked the CC0-1.0 title optional text on the preview page to change from a span to div.

The title is still showing up without the color.

@wking can you inspect the web page and let me know what I'm doing wrong?

[wking]

On Tue, Nov 28, 2017 at 08:08:24PM +0000, goneall wrote:

I hacked the CC0-1.0 title optional text on the preview page to change from a span to div.

The title is still showing up without the color.

Using the Firefox dev tools (I'm sure other browsers have similar tools), you can see the expected #0000cc on the <div>:

And you can see that a <p> rule is clobbering that for the title itself:

Here's the clobbering CSS in context:

Since <p> and <li> content is likely to be the bulk of the licenses, I'd recommend using something like <div class="license"> or similar to wrap the whole embedded license. That lets you separate your styling from the surrounding site theme. Then use selectors like:

.license {
  color: #58595b;
}

to set the default color,

.license h1, .license h2 {
  color: #4597cb
}

and similar to set header colors, and

.license .optional-license-text {
  color: #0000cc;
}

to set the optional color.

More specificity docs here. Your current issue is the high-specificity #page ID.

One issue is that we will want to address around this is nested <optional> sections. Ideally with some kind of graduated blue as you get more deeply nested. But we can address that separately from this issue.

[goneall]

When I changed to <div> it inserted newlines in the rendered HTML. I updated the preview site - see https://spdx.org/licenses/preview/CC0-1.0.html for an example.

[goneall]

Found this: https://stackoverflow.com/questions/1826735/how-do-i-prevent-div-tag-starting-a-new-line

I'll give the display:inline a try

[wking]

I've updated the title, now that I think <var> is a better choice for wrapping phrasing content.

[wking]

Fixed by #122.