Some time ago I have written an XSLT "program" that converts Eagle (PCB CAD) files to SVG. It runs on Firefox and Internet Explorer.
However, on current version of Chrome and Chromium, it will sometimes not work.
This one works and shows the schematic as SVG:
http://www.tu-chemnitz.de/~heha/enas/STS%20Multiplex/MFC-Verteiler.zip/MFC4.sch?as=SVG
Although very similar and even shorter, this one will show a blank screen:
http://www.tu-chemnitz.de/~heha/enas/UDX5114N.zip/sm5.sch?as=SVG
Both example URLs download genuine Eagle XML schematic files and let the browser do the conversion to SVG without Javascript.
Does someone has a clue how I can track down the problem, if even possible? (Is there something like an XSLT debugger for Chrome?)
In case of importance, I use Windows 7 64 bit German.
I am not sure it is a problem with Chrome, it seems your stylesheet sometimes generates HTML with embedded SVG and sometimes tries to output an SVG document but only gets the SVG namespace right on the root element and some container elements, the content elements are then created in no namespace e.g. end up as <text font-size="2.1336" transform="translate(13.97,154.94)scale(1,-1)" text-anchor="end" fill="#088" xmlns="">black</text>. So wherever you want to output SVG elements with XSLT you should make sure you output them with the right namespace, either using literal result elements with e.g. <text xmlns="http://www.w3.org/2000/svg">..</text> where the namespace could also be present on an ancestor of the literal result element in the stylesheet or by using <xsl:element namespace="http://www.w3.org/2000/svg" name="text">...</xsl:element>, where the namespace declaration could also be present on an ancestor element of the xsl:element in the stylesheet. Putting the namespace on an ancestor element of the result tree you generate in a different template causes the creation of element in no namespace.
For Firefox your stylesheet works differently and inserts a prefix (name="{$svgpre}g") for those SVG elements where the prefix together with the existing namespace declaration on the root puts the elements in the right namespace. Not sure why IE and Edge render the result, other than they seem to put everything into an HTML wrapper and ignore the namespaces in HTML5 fashion.
I know my XSLT: Generating SVG namespace for Firefox and not generating SVG namespace for Internet Explorer was the one and only way to bring it to work on both browsers. Moreover, as the first given example works well in Chrome (and most of my schematics), Chrome seems to have no problem with the missing name space, it's IE compatible, and I expect there is another reason why the second example won't work.
Related
I am styling a website. The core comes from a third party developer and also includes some css. There is one CSS file that really messes up the website. Therefore I would like to remove it from the DOM.
I tried using jQuery:
$('link[rel=stylesheet][href~="./admin/include/WantToRemove.css?rev=1634758035"]').remove();
and in theory it works fine. However every once in a while the rev ID is changed by the third party developer and the code stops working. The name of the .css before the rev does not change.
Something like
$('link[rel=stylesheet][href~="./admin/include/WantToRemove.css"]').remove();
did not work for me. How can I fix this?
~= will match elements that have the passed value surrounded by whitespace. The WantToRemove.css doesn't end in whitespace - it instead ends with ?rev=someNumbers, so that must be causing the selector to fail.
Use *= instead, so that the value is found anywhere inside the attribute, rather than requiring it to be matched as a "word" (with whitespace on one of the ends).
$('link[rel=stylesheet][href*="./admin/include/WantToRemove.css"]').remove();
To avoid jankyness, try to run this as soon as possible after the unwanted stylesheet appears, before the browser has a chance to paint, otherwise your users may see the website styles blink on pageload, which doesn't look good.
If you're able to run code before the CSS element appears, you could also use a MutationObserver instead, and .remove() the <link> when the observer detects it.
I am working on a Laravel project where a file of SVG icons are being included into a Blade template. Each SVG in the file is defined by a <symbol>. I render an individual icon as:
<svg viewBox="0 0 150 150"><use href="#icon-i-want"></use></svg>.
This works great, but the SVGs were made with Adobe Illustrator and they have these auto-generated classes such as, .st0, .st1. These classes contain attributes like fill or stroke. For instance:
.st0{fill:#2595FF;}
<line class="st2" x1="27.8" y1="80.5" x2="39" y2="80.5"/>.
There are so many SVGs in this file that the generic classes overwrite each other (there are 70+ .st0 classes). I can fix the problem by manually breaking the class into attributes.
`.st0{fill:#2595FF;}`
`<line fill="#2595FF" x1="27.8" y1="80.5" x2="39" y2="80.5"/>`
I'm not well versed in SVG and design tools nor do I own a license of Adobe Illustrator. All I have is this large file of SVGs. Is there a tool for what I did manually? Is there a tool (like a CSS inliner) that automatically inlines generated classes?
in svg options when saving from illustrator, choose Style Attributes in CSS properties menu. this way illustrator will inline styles directly to the tag
Your description clearly contravenes CSS rules. Any conforming editor would interpret the CSS cascade, and the last style rule selecting a certain class would win.
Fortunately, not everthing you encounter is standard-conformant. You can try the following
Open the file with Inkscape, it's freely available.
Open Edit -> XML-Editor. In the left-hand treeview, select the root svg element.
In the right-hand attributes view, click on any attribute line. In the lower part, to the right click the "Set" button.
In a short test I just did that triggered the inlining of the styles, and astonishingly gave different fill attributes to elements with the same class, just as intended by AI.
Save as "Plain SVG".
I'm having some problems supporting Internet Explorer 8 in my application.
When a user clicks on a link in non-IE8 browsers, the link works fine and goes to the correct position on the page. Using Internet Explorer 8, however, the links only work when the it doesn't take all of the screen.
To better describe the problem, I took the following screenshots:
DOESN'T WORK
WORKS
Links on the first page appear as such:
The IDs for links appear as such:
<a id="fibra1537"></a>
What is happening?
I would try to use the name attribute in addition to the id attribute.
<a id="fibra1537" name="fibra1537"></a>
EDIT: #greg explains why here
For HTML documents (and the text/html MIME type), the following processing model must be followed to determine what the indicated part of the document is.
Parse the URL, and let fragid be the <fragment> component of the URL.
If fragid is the empty string, then the indicated part of the document is the top of the document.
If there is an element in the DOM that has an ID exactly equal to fragid, then the first such element in tree order is the indicated part of the document; stop the algorithm here.
If there is an a element in the DOM that has a name attribute whose value is exactly equal to fragid, then the first such element in tree order is the indicated part of the document; stop the algorithm here.
Otherwise, there is no indicated part of the document.
I'm working on a project where we went from XHTML to HTML back to XHTML and there are some definite behavioral changes going back with regards to the page rendering before the CSS loads and scripts that read styles reading them before the CSS loads. Can anyone shed some light on why the following is happening and what can be done about it?
Basically, I have a page with the following structure:
<body>
<!-- Content from Source A -->
<link href="http://a.example.com/style.css" />
<header>...</header>
<!-- Content from Source B -->
<link href="http://b.example.com/style.css" />
<div>...</div>
<!-- Content from Source A -->
<footer>...</footer>
<script src="http://a.example.com/script.js">
/* e.g. */
alert($('header').offset().height);
</script>
</body>
When we were in HTML rendering mode, the page blocks rendering at expected points. When we hit the Source A CSS, rendering pauses (blank screen); when we hit the Source B CSS, rendering pauses (header is visible). When we hit the Source A JavaScript, rendering pauses (full page shown) and the script reads element styles from their rendered state. (In reality, of course, WebKit doesn't stop parsing the DOM or executing JavaScript while the CSS loads, but it does halt execution at the first point where the script needs to read a style.)
When we are in XHTML mode, the page doesn't halt rendering at all and will render the entire page completely unstyled. After that, it appears to process the scripts and stylesheets in the order loaded, or rather it executes the scripts in order but doesn't wait for the stylesheet to load before executing a loaded script. This means that the page will render three times (unformatted, with one stylesheet, and with two stylesheets) and the script may infer completely inaccurate values for element sizes.
Can someone shed light on this? This is happening in all WebKit browsers I've tested, including Chrome 17, Mobile Safari 5, and Android Browser 2.1. Is there any way to ensure HTML render ordering without resorting to the text/html mime type?
WebKit uses libxml2 to handle XML, which sends the parsed XHTML back to WebCore and JavaScriptCore to do the CSS rendering and JavaScript execution.
Stylesheet and script tags link to what's called an external entity in XML terminology. That means they are processed last. The XML spec says:
Except when standalone="yes", they must not process entity declarations or attribute-list declarations encountered after a reference to a parameter entity that is not read, since the entity may have contained overriding declarations; when standalone="yes", processors must process these declarations.
Since standalone="yes" specifies that the XML document should be validated by a DTD, this triggers a different processing model.
Link tags are handled differently than xml-stylesheet processing-instructions. The XML stylesheet spec says:
Any links to style sheets that are specified externally to the document (e.g. Link headers in some versions of HTTP [RFC2068]) are considered to create associations that occur before the associations specified by the xml-stylesheet processing instructions. The application is responsible for taking all associations and determining how, if at all, their order affects its processing.
Try commenting out the script tags and converting the link tags xml-stylesheet instructions. Also, try adding standalone="yes" to the XML declaration:
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<?xml-stylesheet href="foo.css"?>
In addition, the use of special characters, entities, and XSLT can further complicate the picture, since the processing model differs between HTML and an XML dialect like XHTML:
The range of allowed chars in XML is defined by the XML spec, and
the range is fully checked by libxml2. Not a concern, unless you parse
this for example with an HTML parser and give the preparsed tree to
libxml2 to serialize back. I hope you're not doing this as XSLT is
an XML language and must be parsed by an XML parser.
References
libxml2 Paser Internals
blink-dev => Intent to Deprecate and Remove: XSLT
blink-dev => Security: libxml2 growBuffer integer overflow on 64-bit machines
blink-dev => Stack-buffer-overflow in xmlSerializeHexCharRef
Webkit Title Index
It is relatively straight forward to iterate through IHTMLStyleSheetsCollection, IHTMLStyleSheet, IHTMLStyleSheetRulesCollection etc. of IHTMLDocument2 to obtain list of all styles in current document.
Any ideas on how to get a list of only used styles in the document? And to be more precise, I am looking for how to find out which images from the css files are being used in the document.
There is a program that says it is able to do this (determine which css images are being used) if IE8/IE9 is installed.
Thanks
Ok I have found an answer to this:
Recent browser versions (FF 3.5, IE 8) have implemented a querySelector method that can be used to query if a selector is used on a page.
see: https://developer.mozilla.org/En/DOM/Document.querySelector for more info.