vertical alignment of cells - version 2

core/modules/parsers/wikiparser/rules/table.js

@@ -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) {

editions/tw5.com/tiddlers/wikitext/Tables in WikiText.tid

@@ -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: