For example i have a DTD
DTD:
<!ELEMENT tbl EMPTY>
<!ATTLIST tbl tableWidth CDATA "0">
<!ELEMENT MyImage EMPTY>
<!ATTLIST MyImage source CDATA "sample.png">
Valid XML:
<tbl tableWidth ="100" />
<MyImage source="image.png"/>
Now in CSS for element tbl I can specify it as
tbl {
display: table;
}
This means that element tbl should be displayed as table. But if we want to display MyImage element as image how can we do that?
Image should come from source attribute. As there is no image value for display css property.
In CSS, an image is a replaced element,
An element whose content is outside the scope of the CSS formatting model, such as an image, embedded document, or applet.
This means CSS doesn't define how replaced content is rendered. It's left entirely to the user agent. And this is why there is no display: image value.
If only browsers implemented CSS3's attr(), you could cheat by doing something like this (which actually results in a replaced pseudo-element):
MyImage::before {
content: attr(source url);
}
But since no browser still implements it as of today, you're pretty much stuck. (Technically the supposed way to do this is to implement a custom user agent for your XML, but I'm not sure most authors are prepared for that.)
Related
Example: JSFiddle
I have an svg image with a style element
<svg ...>
<style>
...
</style>
...
</svg>
If I embed the svg onto an empty HTML document, these two blocks of code result in a difference that I didn't expect.
block #1
let svg = document.querySelector("svg")
block #2
let s = new XMLSerializer();
let p = new DOMParser();
let svg = p.parseFromString(s.serializeToString(document.querySelector("svg")), "image/svg+xml").documentElement;
These two blocks produce a difference in regards to the <style> child (.children[0] here). The CSSStyleSheet is normally found on the "sheet" property on the <style> child:
svg.children[0].sheet
in block #1, the "sheet" property is available.
in block #2, it's null.
why is this? Am I doing something wrong in block #2? The <style> child exists in both cases, it just isn't recognized as a CSSStyleSheet in block #2.
The purpose of all of this is that I am building an SVG parser, so I need to be able to load files as strings and parse them.
workaround?: I can get the innerHTML of the <style> element in both cases, but CSSStyleSheet doesn't have a simple constructor where I can pass in the entire string; that would be nice, I could construct a new CSSStyleSheet. I can create a CSSStyleSheet and add rules individually, but I think I need to parse CSS, which sounds difficult.
I just want the benefit of the CSSRuleList. being able to iterate over that is super helpful.
I found the solution. it's not well documented
A <style> element must be a child of the HTMLDocument (not XMLDocument, nor parent-less) for the "sheet" property to exist and be of type CSSStyleSheet.
this was previously uncovered in this question.
solution (summary)
append the <style> element to the window.document.body, then access "sheet" property.
solution (detail)
get the root parent node of the <style> element (loop .parentNode until at root).
check the type of root with root.constructor === window.HTMLDocument.
(you can't test against null because XMLDocument will not generate a "sheet" property)
if #2 is true, "sheet" property will exist. if false, continue:
append the <style> to document.body. (or the <svg> if it contains the style. both work)
the sheet property now exists. do whatever you need with it.
remove <style> from document.body.
Is it possible to add custom formatting markup to MediaWiki?
Say, for example, I have a div style I use quite often and I'd like to make markup to apply it more quickly than using <div id="frequentlyusedstyle">Title</div> -- like surrounding the text with ##Title## instead of typing out the div id. Is that possible?
(I realize that there is already heading markup; that's just an example. Thank you in advance!)
Just create a new page named "Template:name", where 'name' is whatever you want to name it, with the following text (as per your example):
< div id="frequentlyusedstyle">{{{1|}}}< /div>
(minus the extra spaces, since I don't know how to keep html from
parsing here.)
You would then use it by adding {{template name|Title}} to an article, and it will invoke the style.
You will need to have a style defined in MediaWiki:Common.css or similar, in order to style that div, such as:
#frequentlyusedstyle {
color: red;
}
Hope that helps.
Basically what I'm trying to do is copy this style (from a word doc) but using rst.
I was thinking I might need a custom directive which I can can include the header and style the internal checkboxes.
Ideally I would like to be able to do something like:
.. handson::
The title
- Check one
- Check two
The bulltet items inside the handson block would be styled as checkboxs but the rest of the document would just have normal bullet points.
I had a look at the custom directive stuff but I'm not sure if that would be the best way to tackle this. I'm also using rst2pdf if that has any impact on the results.
If you don't want to go down the route of creating a custom directive, you could use a normal admonition block and "fake" the check boxes. Your markup could be standard reStructuredText:
.. admonition:: The title
- Check one
- Check two
You can then include some custom CSS markup within your reStructuredText file to target list items in admonitions:
.. raw:: html
<style>
.admonition ul { list-style-type: none; }
.admonition li:before { content: "\2610"; }
</style>
Here the CSS targets any list item element which is a child of any element with the class "admonition" and replaces the list item bullet points with simulated check boxes using the Unicode Ballot box character, ☐.
Docutils applies an additional class to generic admonitions which is a concatenation of "admonition" and the admonition title. So in the above example we could be more specific with the element we target with the CSS rule:
.admonition-the-title ul { /* ... */ }
This could be used to target a single admonition within your document.
Credit goes to these two answers to the SO question How to create a checklist in reStructuredText (reST)?
Obviously the above targets HTML output. However, I have not used rst2pdf, so can't comment on how the above needs to be modified to work with this program. Hopefully someone else will provide an answer to this. As far as I know, rst2pdf does support a cascading stylesheet mechanism, so it should be straightforward (for someone who knows rst2pdf style sheet syntax) to add an additional .. raw:: pdf role and to modify the above list styles.
I am working on a small project.
I wish to add an anchor tag <a> inside another element using the css content attribute and the :after pseudo.
e.g.
.classname:after { content: '<a>hello</a>'; }
// this will print "<a>hello</a>"
What I need it to do is make it have a working anchor tag, pointing to a given href.
I know you can use something like this content: attr(title); so it will use .classname title attribute as a text, I don't know if this is even possible but, it would be cool if it was.
You can't use the CSS :before and :after pseudo-elements to insert HTML elements. To add HTML elements you need to use JavaScript.
You cant im afraid. You have to use javascript :(
A quick example of putting a link into a p with the id of myP tho... and a variable for a url (which could be obtained from any value really)...
var myUrl = "http://www.glcreations.co.uk";
document.getElementById("myP").innerHTML = "<a href='" + myUrl + "'>A link for you to click on</a>";
I use CMS for client and client doesn't know CSS he use WYSIWYG editor to put content in pages. Client adds Paragraphs, images, images in paragraph (left or right floated), ordered and unordered list, Tables. Problems comes when he want to add images in paragraph (left or right floated). and without adding css class it's not possible. And i don't want to add <div> in content because WYSIWYG editor can't manage div and client works in WYSIWYG mode.
How to style content of pages without using css class?
You will need your user to add a CSS class/style attribute to the image somehow - without adding something to the image to tell it to float right or left it won't float right or left.
If your question is how the client can add the class without having to manually edit the HTML I reckon the only way is to dive into the WYSIWYG editor's javascript and write something a bit like this towards the end of the image-adding process:
var alignment = prompt("Type l to align the picture to the left, and r to align the picture to the right","l").strToLower();
if(alignment == 'r')
{
//line of code to add class "right" to the image tag
} else {
//line of code to add class "left" to the image tag
}
What the code to add the classes should depend on how the WYSIWYG editor works
You can try using element selectors or ID selectors to add styles to HTML elements without referencing CSS class in them.
Element selector would add border to all images on the page:
img { border:1px; }
ID selector would do the same only to image with ID 'image1':
img #image1 { border:1px; }
Still you will need to reference the stylesheet from your page.
There are lots of different ways you can make CSS Selectors that don't require CSS classes. For example, to make a rule that applies to all img tags inside p tags, you could write this:
p img { float: left; }
But how are you hoping to determine which images need to be right-aligned and which images need to be left aligned? Does that data exist in the document in any machine readable format?
A WYSWYG should have "align" property for an image (at least those I have seen). You can then use CSS attribute selector img [align=left] { float:left; } or img [align=right] {float:right;} This wont work on IE 6,7 though, you can use JavaScript to mimic this for those browsers.