I wanted to provide an update for anyone who might search for this problem in the future. I had seen the image solution posted somewhere else and after trying (and failing) to use css to rotate the text, we resorted to using the image solution.
What we did was build a server side rest method that can generate a vertical text image with a transparent background. This method can also return the height of the image. The method calls look like this:
http://localhost:8080/tabImage?method=imageHeight&text=Hello World&bold=true
http://localhost:8080/tabImage?method=image&bold=true&text=Hello World
The imageHeight method is important to call BEFORE setting the image into the tabbar. This is because dhtmlx doesn’t know the height of the image until the src url resolves, and in my experience it simply defaulted to 55px high. So during tab creation we request the imageHeight first, and in the callback method to that rest call, we set the label in the tabbar:
this.requestTabText = function(text, index, bold) {
$.getJSON("http://localhost:8080/tabImage?method=imageHeight&text=" + text +"&bold=" + bold + "&callback=?", this.setTabText.bind(this, text, index, bold));
}
this.setTabText = function(text, index, bold, data) {
//Use your own imageHeight. Ours comes back as data.imageHeight
this.tabbar.setLabel("" + index, '<div style="height:' + data.imageHeight + 'px;" id="tabImage' + text + '" ><img id="labelImage' + text + '" style=" margin-left: auto; margin-right: auto" src="http://localhost:8080/tabImage?method=image&bold=' + bold + '&text=' + text + '"/></div>');
}
For those using Java, here is the server side object we used to generate the image:
public class TabImageHandler {
private static final String METHOD_PARAM = "method";
private static final String BOLD_PARAM = "bold";
private static final String TEXT_PARAM = "text";
private static final String IMAGE_METHOD = "image";
private static final String IMAGE_HEIGHT_METHOD = "imageHeight";
public static final void doGet(HttpServletRequest request, HttpServletResponse response) throws Exception {
String method = request.getParameter(METHOD_PARAM);
String text = request.getParameter(TEXT_PARAM);
String boldStr = request.getParameter(BOLD_PARAM);
boolean bold = false;
if(boldStr != null && !"".equals(boldStr))
bold = Boolean.parseBoolean(boldStr);
if(method.equals(IMAGE_METHOD)) {
response.setContentType("image/png");
BufferedImage textImage = createTextImage(text, bold);
ImageIO.write(textImage, "png", response.getOutputStream());
}
else if(method.equals(IMAGE_HEIGHT_METHOD)) {
FontMetrics metrics = getImageWidthHeight(text, getFont(bold));
//Return imageHeight as metrics.stringWidth(text).
//Yes, I do mean stringWidth(text) as the 270 degree rotated image will use it's width as height.
}
}
/**
* Takes in a string of text, and a boolean denoting whether or not the resulting text image should be rendered in bold font.
*
* @param text
* @param bold
* @return
*/
private static BufferedImage createTextImage(String text, boolean bold) throws IOException {
String spacerGifPath = "";//Use your own path to the 1x1 transparent gif.
BufferedImage transparentImage = ImageIO.read(new File(spacerGifPath));
Font font = getFont(bold);
FontMetrics metrics = getImageWidthHeight(text, font);
//Since we are using
int h = metrics.stringWidth(text);
int w = metrics.getHeight() + 5;
BufferedImage img = new BufferedImage(w, h, BufferedImage.TYPE_INT_ARGB);
Graphics2D g2d = img.createGraphics();
g2d.drawImage(transparentImage, 0, 0, null);
g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
g2d.setFont(font);
AffineTransform at = new AffineTransform();
at.setToRotation( 1.5 * Math.PI );
g2d.setTransform(at);
g2d.setColor(Color.BLACK);
g2d.drawString(text, (int) (-1 * h), w / 2);
g2d.dispose();
return img;
}
/**
* Returns a Font that matches DHtmlx tabbar font.
*
* @param bold
* @return
*/
private static final Font getFont(boolean bold) {
Font font;
if(bold)
font = new Font("Tahoma", Font.BOLD, 12);
else
font = new Font("Tahoma", Font.PLAIN, 12);
return font;
}
/**
* Creates a graphics object that can then be used to generate a FontMetrics object. This
* object will contain the width and height required to contain the text.
*
* @param text
* @param font
* @return
*/
private static final FontMetrics getImageWidthHeight(String text, Font font) {
BufferedImage tmpImg = new BufferedImage(400, 400, BufferedImage.TYPE_INT_ARGB);
Graphics2D tmpG2D = tmpImg.createGraphics();
tmpG2D.setFont(font);
tmpG2D.rotate(270 * java.lang.Math.PI/180);
tmpG2D.drawString(text, 0, 0);
return tmpG2D.getFontMetrics();
}
}
