CSS selectors in base.css are case sensitive

[sathomas]

Looking at the Scientific Paper example from README.md, there are at least two selectors that are case sensitive, .Bi and .bi:

.Bi {
  position:absolute;
  border:0;
  margin:0;
  top:0;
  bottom:0;
  width:100%;
  height:100%;
  -ms-user-select:none;
  -moz-user-select:none;
  -webkit-user-select:none;
  user-select:none;
}
.bi {
  position:absolute;
  border:0;
  margin:0;
  -ms-user-select:none;
  -moz-user-select:none;
  -webkit-user-select:none;
  user-select:none;
}

According to the standard, however, CSS should be case insensitive. Although browsers often treat class names as case-sensitive (because HTML attribute values are case sensitive), that is not always the case. For example, if the CSS is injected into the page via JavaScript the selectors (even those for class names) are treated as case insensitive.

In the specific example above, if the pdf2htmlEX output is rendered without CSS case sensitivity, the background image for figure 1 receives the properties of both the .Bi and the .bi classes, and is (incorrectly) absolutely positioned at the top of the container, as can be seen from the screen shot below:

[coolwanglu]

From what I got from the Internet, css is case insensitive but class names are, because they are attributes defined in HTML -- just as you have mentioned. I did see a few articles suggesting not to use case insensitive matching class names.

I wonder if you can write an example of 'injecting css via javascript', I'm not sure about how it works.

[sathomas]

Full context on github, but the code itself is simple enough.

Either:

$.ajax({
    url: '/path/to/base.css',
    dataType: 'text'
})
.done(function(response) {
    var domNode = domNode || document.createElement('style');
    domNode.type = 'text/css';
    if (domNode.styleSheet) {
        domNode.styleSheet.cssText = response;
    } else {
        domNode.appendChild(document.createTextNode(response));
    }
    var head = document.head || document.getElementsByTagName('head')[0];
    head.appendChild(domNode);
})

Or:

$('head').append('<link rel="stylesheet" href="/path/to/base.css"/>');

Both will expose the bug in the stylesheet. Apparently, when Safari or Chrome (I haven't checked other browsers) retrieves the referenced style sheet, it converts all CSS selectors to lower case. You can see from the developer console that the server delivers the file with mixed case:

But when the browser determines which selectors to apply, it's converted all selectors to lowercase, which again is evident from the developer console.

As a result, even though the image has a class of bi, it's getting the CSS rules for both .bi and .Bi and the top property is getting set to 0 which, as the original screen shot demonstrates, places the image in the wrong place on the page.

[coolwanglu]

It seems to be a bug about javascript of chrome: http://code.google.com/p/chromium/issues/detail?id=74750

I'll change the class name anyway.

[coolwanglu]

Fixed. Thanks!