The generated css can cause problems when embedded in a webpage.

[RMWinslow]

Problem

The "Hello World" example on https://kineticgraphs.org/ imports https://kineticgraphs.org/css/kg.0.2.7.css

This works fine on its own, but when the Hello World example is embedded in another webpage, some of the css rules affect the entire page and not just the kg-container objects. The can cause unintended behavior. For example:

• the scroll-bar vanishes (which on same pages can be an accessibility concern)
• katex text is rendered smaller than default on the entire page
• and using the latest version available, kg.0.3.3.css, the background color of the entire webpage is altered.

Most of the kg.0.x.x css is just a copy of the default katex css, so if you're already using katex, you can mostly circumvent these problems by simply not loading the kg.0.x.x.css file. However, this is suboptimal because we lose some of the kg-specific styling that way, which results in things looking a bit odd and certain features (like the gameMatrix style rules) not rendering at all.

The other workaround is to make a local copy of the css and trim out the undesired style rules, but this may be error prone and may need to be manually redone by the user if they want to use a future version of kgjs.

Suggested solution

• Firstly, ensure that all the style rules meant for kg-container objects are restricted to apply only within kg-container objects.
• Secondly, separate non-kg-container style rules out into a separate file and include these rules only in the generated kg-tufte.0.x.x.css files.

For example, in the following snippet of css, all of these rules should be restricted to kg-containers, but only the first two blocks of rules actually are.

div.kg-container text {
    cursor: default;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

div.kg-container text::selection {
    background: none;
}

text {
    font-size: 10px;
}

input {
    font-family: KaTeX_Main;
}

.katex {
    font-size: 1em;
}

One way to fix this would be prepend div.kg-container to all the relevant rules. Another way would be to nest all of the rules inside a .kg-container selector like so:

div.kg-container {
    text {
        cursor: default;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    text::selection {
        background: none;
    }
    text {
        font-size: 10px;
    }
    input {
        font-family: KaTeX_Main;
    }
    .katex {
        font-size: 1em;
    }
}

But the entirety of the kg.css file can't simply be nested within a .kg-container selector because there are also style rules sprinkled throughout that apply to the kineticgraphs website. These include rules for the contents, kgjs-title, and documentation classes, as well as the aforementioned background-color change. I would make a pull request to fix the first issue, but I'm not familiar enough with the project to confidently disentangle the kg-container classes from the kineticgraphs.org classes.

Disentangling the style sheet and restricting its scope would make the library much more portable for use in other websites.