I have following table in asciidoc, for which I want the very first cell to be split diagonally (or by some other means more readable) in the sense that it is clear that the top row is the "to", the first column is the "from" one:
[cols=","]
|===
a|
To →
From ↓
|Hans
|Karl
|Secret gift
|===
Please note that if I change to [cols=",",options="header"] the spaces of the first cell are removed, making it even harder to understand the table semantics.
See also How can a split diagonally a table header cell? for similar question explaining the requirement in HTML
You would need custom CSS, and possibly a background image, to perform the diagonal split that you seek.
However, built-in roles might suffice:
[cols="a,"]
|===
h|
[.right]#to →#
From ↓
|Hans
|Karl
|Secret gift
|===
This makes the "to/from" cell a header, and uses the default theme's .right style to move the "to" to the right edge of the cell.
If you do need to apply custom styles, see the section on Docinfo Files.
The answers to this question might provide an appropriate solution for you.
Related
I like to have a table in asciidoc, where there is an empty row in it.
The problem is, letting the row empty makes it very small automatically.
[cols="5,3,3"]
|===
|||
|===
I tried to fill the cells with spaces, + `s , line feeds, tabs. But there is no character I know, where the cell is empty on the paper and has the normal height.
What I mean is a css-like min-height, or a special character like in html.
So how to force an empty table row to have the normal line height?
Your problem seems difficult. I hope you have good reasons to add an empty row.
Maybe a small hack might help you for the moment :-)
[cols="5,3,3"]
|===
a|image:sunset.jpg[""]||
|===
I just put an image which does not exists in the first column. Maybe a one pixel image might work as well. The a in front of |makes the asciidoctor interpreter to read it as asciidoctor.
Found the solution by myself:
[cols="5a,3,3"]
|===
|{nbsp} +
{nbsp} +||
|===
The ain the column definition marks this column as asciidoc-content, so that asciidoc commands will work. The {nbsp} + is the magic keyword for an empty space, which is not like the normal space. The normal space will be ignored, the {nbsp} is not ignored.
Hope that helps for other cases too.
Found it here: https://github.com/asciidoctor/asciidoctor/wiki/How-to-insert-sequential-blank-lines
I've just draw a stacked-area-chart with D3JS.
This is my referral implementation
I also need to dynamically swap the ordering of the layers.
I think that there isn't a way to do it dynamically without redrawing (or is there any? :D )
Actually i'm trying to map the data to a new header column, but this implies the redrawing.
Let me show you an example:
Here is the TSV header ['date', 'columnA', 'columnB', 'columnC']
Every column, except of 'date', represent the % of area for that sample.
I would like to dynamically rearrange the area layers, but I'm pretty sure that I also need to parse again the data with a new header
eg: ,
['date', 'columnA', 'columnB', 'columnC']
-map to-
['date','columnB', 'columnC', 'columnA']
and then draw the result.
I'm doing it right? Thanks for your support, cheers.
This is the line that defines the array that will be passed to the stack() function:
var keys = data.columns.slice(1);
Right now, this is the array:
["Google Chrome","Internet Explorer","Firefox","Safari","Microsoft Edge","Opera","Mozilla","Other/Unknown"]
But you can sort it anyway you want. For instance, sorting by alphabetic order:
keys.sort();
Which gives us:
["Firefox","Google Chrome","Internet Explorer","Microsoft Edge","Mozilla","Opera","Other/Unknown","Safari"]
Here is the result: https://bl.ocks.org/anonymous/6a339ed0731a70bb234af150ee6b4a99
Here is another one, with a random permutation (refresh the page to see diferent orders): https://bl.ocks.org/anonymous/662f99901219b8907030ec3c84363f3a
Pay attention to this: the order in the stacked area chart is now different, but the colours don't keep the same for each browser (that is, each stacked area). That's because d3.scaleOrdinal(d3.schemeCategory10) assigns the colours in a first-come, first served basis.
I have a drop down box and old data in the sheet that doesn't match up to the drop down box list needs to be added to my conditional formatting so the cell stands out a bit better.
Is it possible to set the conditional formatting of a cell based on whether or not the cell has a validation error?
It is impossible to do that the way you want, but there is a workaround.
You can use conditional formatting with a custom formula.
If you data validation is from a range, use that range. If it is from a list, create a range with that list.
For example a range on Sheet2 A1:A10 has the values that are used in data validation. You want to format the range Sheet1 B:B based on values found in that range.
First, select the column in your table(or the whole table) and colour it Red. Then use Conditional Formatting with the following custom formula to colour everything that matches White
=COUNTIF(INDIRECT("Sheet2!$A$1:$A$10"),"="&B1)
You can also add another conditional formatting to colour all the empty cells as white if you have empty space after your table
Good stuff! It took me a while but I found that this formula works and will color the cells that are not in the range AND do not have a blank cell at the first column. This is good to spot data validation errors and works better than looking for a little tiny triangle at the top right of each cell.
=AND(NOT(COUNTIF($M$3:$M$40, H3)),A3<>"")
This worked for me.
Under conditional formatting, new rule, use formula.
=IF(OR(A2="valid data 1",A2="valid data 2"),"FALSE","TRUE")
Then set error condition.
ahoy all,
i have a simple example that mixes float-span and grid-span mixins within the same grid context (i.e. the same number of columns in the same row)
http://sassbin.com/gist/7812502/
as you can see, i have 3 items that i want to space out evenly in a row. i use float-span with first and last options on items 1 and 3 to make them sit at the beginning and end of the row respectively, and this works as expected. for the middle item, which i want centered, i assumed i could use grid-span with the correct location to have the 2nd item in the middle. however, what is happening is that the counting of location for grid-span is started after the column taken up by the first floated item. is this expected behavior? in other words, is it allowable to mix float-span and grid-span in the same grid context/row? and if not, what is the preferred way in Singularity for accomplishing the same thing?
i have been searching the documentation wiki, in particular the section on spanning the grid, but have found no statements either way. and the demos do not seem to be using float-span and grid-span together.
thanks as usual for Singularity and for any help.
peace
PS. i have already tried using the isolation-span mixin in place of grid-span with the same results.
It is not advisable to mix output styles like float and isolation in the same grid. You should pick either isolation or floats and stick with it.
Here is your sassbin tweaked a bit: http://sassbin.com/gist/7815953/
I'm using singularitygs as my grid system and am really like the flexibility but I have come across a fairly unique situation and I'm not sure if singularity (or any other grid system) addresses
I have a row that span the entire column width, that breaks up the header portion and the content portion of the document. There is an element, div.b, that sits within above the full column bars next to div.a in larger layout. But on a medium sized layout and below, that element falls below the full span row. Here is the source order and the desired output, showed using a 10 column layout for simplicity.
Source Order
div.a
div.b
div.c
div.d
div.e
div.f
div.g
div.h
Large Layout
Medium Layout
Thanks in advance for any help and ++ to the creators of the grid system
Interesting use case. Honestly it’s going to be pretty hard until CSS grid layout comes out. While Singularity can handle any order horizontally, the vertical reordering like "D" and "G" stacked is going to be tricky. There might be a clever use of floats to get this working but it will probably be more hand manipulation of elements than pure Singularity magic.