Less than symbol (<) in a style element?

Support
1

Operating system

Windows

Joplin version

3.6.14

Desktop version info

Joplin 3.6.14 (prod, win32)

Device: win32, Intel(R) Core(TM) i7-4700HQ CPU @ 2.40GHz
Client ID: 9470a5e15005470290a4d0c3e23c1f52
Sync Version: 3
Profile Version: 49
Keychain Supported: Yes
Alternative instance ID: -
Sync target: OneDrive
Editor: Markdown

Revision: 7e2765a

Backup: 1.5.1
Freehand Drawing: 4.3.0

Sync target

OneDrive

Editor

Markdown Editor

What issue do you have?

Is there any way to escape a less than symbol (<) in a style tag?

When using a less than symbol (<) in HTML it is converted to &lt;. This means CSS that relies on this symbol breaks.
For example the following CSS changes colour using the attr() CSS function.

<style>
    [data-color] {
        color: attr(data-color type(<color>));
    }
</style>

<span data-color="blue">foo</span>

However, it does not work in the viewer. Inspecting the element shows that the color property has been parsed as attr(data-color type(&lt;color>));, which is invalid.
The CSS works as intended when in the stylesheet.

1 Like