1
0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-12-24 17:10:29 +00:00

vertical alignment of cells - version 2

This commit is contained in:
Stephan Hradek 2013-12-31 11:05:08 +01:00
parent ce8cc7607f
commit ec14a0a16d
2 changed files with 41 additions and 1 deletions

View File

@ -38,7 +38,8 @@ var processRow = function(prevColumns) {
if(last) {
last.rowSpanCount++;
$tw.utils.addAttributeToParseTreeNode(last.element,"rowspan",last.rowSpanCount);
$tw.utils.addAttributeToParseTreeNode(last.element,"valign","center");
var vAlign = $tw.utils.getAttributeValueFromParseTreeNode(last.element,"valign","center");
$tw.utils.addAttributeToParseTreeNode(last.element,"valign",vAlign);
if(colSpanCount > 1) {
$tw.utils.addAttributeToParseTreeNode(last.element,"colspan",colSpanCount);
colSpanCount = 1;
@ -75,6 +76,16 @@ var processRow = function(prevColumns) {
// Look for a space at the start of the cell
var spaceLeft = false,
chr = this.parser.source.substr(this.parser.pos,1);
var vAlign;
if (chr === "^") {
vAlign = "top";
} else if(chr === ",") {
vAlign = "bottom";
}
if(vAlign) {
this.parser.pos++;
chr = this.parser.source.substr(this.parser.pos,1);
}
while(chr === " ") {
spaceLeft = true;
this.parser.pos++;
@ -100,6 +111,9 @@ var processRow = function(prevColumns) {
// Parse the cell
cell.children = this.parser.parseInlineRun(cellTermRegExp,{eatTerminator: true});
// Set the alignment for the cell
if(vAlign) {
$tw.utils.addAttributeToParseTreeNode(cell,"valign",vAlign);
}
if(this.parser.source.substr(this.parser.pos-2,1) === " ") { // spaceRight
$tw.utils.addAttributeToParseTreeNode(cell,"align",spaceLeft ? "center" : "left");
} else if(spaceLeft) {

View File

@ -36,6 +36,32 @@ The example renders as:
| Centred content |
|+++ a very wide column so we can see the alignment +++|
! Cell vertical Alignment
Vertical alignment of cells is done by inserting either a `^` for top alignment or a `,` for bottom alignment as the first character of a cell. The normal horizontal alignment is still possible.
A shortned example:
```
|^top left |^ top center |^ top right|
|middle left | middle center | middle right|
|,bottom left |, bottom center |, bottom right|
```
The example renders as:
| :: | ::::::::::::::::::::::::::: | ::::::::::::::::::::::::::: | ::::::::::::::::::::::::::: | :: |
| ::<br>:: |^top left |^ top center |^ top right| ::<br>:: |
| ::<br>:: |middle left | middle center | middle right| ::<br>:: |
| ::<br>:: |,bottom left |, bottom center |, bottom right| ::<br>:: |
| :: | ::::::::::::::::::::::::::: | ::::::::::::::::::::::::::: | ::::::::::::::::::::::::::: | :: |
Should you ever want to have a `^`or a `,` as the first character of a left aligned cell, you need to use html-escaping.
| `^` | &amp;#94; |
| `,` | &amp;#44; |
! Cell Merging
To merge a table cell with the one above, use the special cell text `~`. To merge a cell with the one to its left use the text `<`. To merge one to its right use `>`. For example: