I'd like to layout (and maybe print) my AsciiDoctor document, which is a cheatsheet with mostly tables.
What is the best way to get a multi-column HTML output and also get multi-column PDF for printing?
I've found that
#col {-moz-column-count: 2;-webkit-column-count: 2;column-count: 2;}
can be used in the HTML with a <div>, but so far I modified the HTML manually. (I'm only guessing a bit what to do, since I'm not a web-developer.)
Is there a way to include this style and div in the AsciiDoctor source file?
What is the best way to get a multi-column PDF?
This describes how to do this for HTML.
You can add CSS as passthrough-content (++++) when using HTML output. Your example would look like this:
++++
<style>
#col {-moz-column-count: 2;-webkit-column-count: 2;column-count: 2;}
</style>
++++
You could then add a div around some content using passthrough content as well:
++++
<div id="col">
++++
This
Is
Multicolumn
text
++++
</div>
++++
But to assign an ID to a block you could write in a more portable way
[[col]]
--
This
Is
Multicolumn
text
--
As #col is a CSS selector for an ID of an element, it might be more convenient to use a CSS class .col instead. You can then have multiple blocks with the same style like this - note that this is now using single brackets for the block style instead of the double brackets above for the ID.
++++
<style>
.col {-moz-column-count: 2;-webkit-column-count: 2;column-count: 2;}
</style>
++++
[col]
--
This
Is
Multicolumn
text
--
[col]
--
This
Is
Multicolumn
text
--
The last snippet would produce the following:
Related
I use
<div class="tc-table-of-contents">
<<toc "Inhalt">>
</div>
where every tiddler tagged with Inhalt is listed in toc. This works fine.
But I have an additional tag named Fahrt. Is it possible to change the color in the toc of this entries? The result should look like this:
Only tag Inhalt --> normal blue color
tag Inhalt + tag Fahrt --> perhaps a lighter blue oder different color
This isn't possible with the default toc macros, but we can write a new macro based on the built-in toc macro to do this without too much trouble. We'll make a version of the macro, template-toc, that uses a template to display each element in the table of contents – this way, we'll be able to reuse our work to format TOC elements in a totally arbitrary way. (Fuller explanation of templates. NB: I wrote this.)
We first start by copying the macros toc and toc-body from $:/core/macros/toc and pasting them into a new tiddler $:/template-toc-macros (you can call this tiddler anything you want) with the tag $:/tags/Macro (this will cause the macros in it to be available in any tiddler in the wiki).
Then we rename toc-body and all references to template-toc-body, likewise toc to template-toc. We add a parameter template as the second parameter of both of these macros, and adjust the bodies of both so that they transclude the <<__template__>> parameter as a tiddler rather than looking into the caption and title fields for a title and creating a link with this as the text. That makes the body of this tiddler look like this:
\define template-toc-body(tag,template,sort:"",itemClassFilter,exclude,path)
\whitespace trim
<ol class="tc-toc">
<$list filter="""[all[shadows+tiddlers]tag<__tag__>!has[draft.of]$sort$] -[<__tag__>] -[enlist<__exclude__>]""">
<$let item=<<currentTiddler>> path={{{ [<__path__>addsuffix[/]addsuffix<__tag__>] }}}>
<$set name="excluded" filter="""[enlist<__exclude__>] [<__tag__>]""">
<$set name="toc-item-class" filter=<<__itemClassFilter__>> emptyValue="toc-item-selected" value="toc-item">
<li class=<<toc-item-class>>>
<$transclude tiddler=<<__template__>>/>
<$macrocall $name="template-toc-body" tag=<<item>> template=<<__template__>> sort=<<__sort__>> itemClassFilter=<<__itemClassFilter__>> exclude=<<excluded>> path=<<path>>/>
</li>
</$set>
</$set>
</$let>
</$list>
</ol>
\end
\define template-toc(tag,template,sort:"",itemClassFilter:"")
<$macrocall $name="template-toc-body" tag=<<__tag__>> template=<<__template__>> sort=<<__sort__>> itemClassFilter=<<__itemClassFilter__>> />
\end
Now here's how we use this: we create a template tiddler which, given that the variable <<currentTiddler>> is set to a particular tiddler we want to include in the TOC, renders the HTML/wikitext we want to include in the table of contents. In this example, we'll call this tiddler MyTemplate, but you'll probably want to use something more descriptive. In your case, the text will look something like:
<$link to=<<currentTiddler>>>
<$list filter="[all[current]tag[Fahrt]]" emptyMessage="""<$view field='caption'><$view field='title' /></$view>""">
<span style="color: red;"><$view field='caption'><$view field='title' /></$view></span>
</$list>
</$link>
That is, if the filter [all[current]tag[Fahrt]] has any output, i.e., the currentTiddler is tagged Fahrt, then fill in the body of the $list widget (creating a span with a color: red; CSS property), containing the caption field if it exists on the tiddler, or the title field otherwise. If it's not tagged Fahrt, then fill in the contents of emptyMessage, which does the same thing but without the color. In either case, create a link going to currentTiddler containing that content.
Lastly, wherever you want to show the table of contents, call the template-toc macro instead of the toc macro, and pass it the template you just created as a second argument:
<div class="tc-table-of-contents">
<<template-toc "Inhalt" MyTemplate>>
</div>
Result:
I have a template variable called TAGS... the input is as follows: "alpha,beta,gamma,delta". So technically thats one tag.
How to separate the individual tags inside this one tag so I can apply HTML anc CSS code to them.
For example, that "alpha" has border:1px solid black, and for "gamma" the same CSS style. If I apply this example CSS code on my TV TAGS, then the whole block of "alpha,beta,gamma,delta" gets the border and not the individual tags. How to do this for EVO 1.1.?
I m using jade's dot syntax to render the HTML. Inside that template I used some code to iterate some data ( posts ). But cannot get the output, it gives an error as :
Cannot read property 'title' of undefined
I know i m using the incorrect syntax to use codes inside the dot syntax method. But don't know how to correct it. The following is the code. Please note:
div.container.
<div class="test">
each post, i in posts
<div class="cls">#{post.title}</div>
</div>
Any help is more appreciable.
Jade doesn't allow for using most of its syntax, such as each iteration, where plain text is expected, such as inside "Block Text" tags (dot-suffixed).
Currently, the each post, ... is being output as text content rather than being evaluated, so it isn't defining post (and i) for #{post.title} to succeed.
You could instead use lines of "Piped Text" to mix the HTML and jade's each iteration.
div.container
| <div class="test">
each post, i in posts
| <div class="cls">#{post.title}</div>
| </div>
Or, you can also use Jade's own syntax throughout:
div.container
.test
each post, i in posts
.cls= post.title
I like to put all my inline elements in a single line.
<ul>
<li><a>click<span>here</span><strong>!</strong></a></li>
Wondering if there's a better way to create inline elements in Jade than this:
ul
li
a(href="#") click
span here
strong !
This get's a little closer but I'm not sure how to add the span and strong tags without breaking the lines.
ul
li: a(href='#') click
span ...
This obviously isn't a super big problem but it's a little annoying that I can't put inline elements inline. Thanks for the help
Since version 1.0, jade supports inline tags:
#[tag(attribute='value') inner stuff]
In your case that would be:
ul
li #[a(href="#") click #[span here #[strong !]]]
Ran into this today myself. Found a way to do this in jade using the pipe.
Here is my example wrapping a strong tag inside a p element.
p.some-class
strong This Renders Strong
|This renders normal
I also struggled with this a while back; the only answer I found is to just use HTML.
ul
li: a(href='#') click<span>here</span><strong>!</strong>
I am trying to move text next to my header, but it is not working using margins - when i try to move it all the text boxes move, even though each text box is a seperate div tag.
Here is my code for this part
<body>
<div id="wrapper">
<div id="header">
<h4><strong>Qtek Australia</strong></h4>
<div id="home">Home</div>
<div id="Aboutus">About us</div>
<div id="Contactus">Contact us</div>
<div id="Location">Location</div>
</div>
i am trying to move the home, about us, contact us and location to the right of the header "Qtek Australia", please help
You can try wrapping the h4 in another div and placing it where you want.
If this is the way you already tried, another way could be wrapping the three div you want to place on the left in one div, the other four in another and move around these two divs. It should be easier, even if you can get divitis doing so.
I will say that your document semantics are quite vague. You probably don't need to use STRONG inside your heading - it's conceivable that you really mean to emphasize the thought expressed in it, but I suspect that you only want the heading to appear bolder. Use CSS to achieve that, as in: h4 {font-weight:bold; font-size: 14em;}.
It's also conceivable that your page makes the most sense with the navigation starting at the fourth level of some topic, but it's highly unlikely; in the vast majority of cases, the navigation would exists higher up - under h1 or h2.
Your navigation itself would be more coherent if it was an unordered list.
<ul>
<li>Home</li>
<li>About Us</li>
...
</ul>
This also has the advantage of allowing you to style the navigation elements both as a set and individually.
You probably don't need to be wrapping your elements in all those divs. Most elements in HTML are containers - headings, lists, paragraphs, just about everything can be styled - including positioning and moving - by itself.
For instance, one means of positioning the navigation list to the right of the h4 would be to style the h4 with "display:inline", or "float:left", which would bring the following element (the list) onto the same line. There's a lot of different ways to go about that kind of positioning, and it's not even clear that this is what you're after.
Clarify what you mean; and it would help if you posted whatever CSS or JavaScript you're using.