Is vertical centering of text possible?

[MobileVisuals]

I read in the documentation for the Graphics class that it is not possible to implement vertical centering of text :

"Vertical centering of the text is not specified since it is not considered useful, it is hard to specify, and it is burdensome to implement. Thus, the VCENTER value is not allowed in the anchor point parameter of text drawing calls."

So isn't there some way to implement this? We need get this to work because OVI demands that we place the button labels near the keys in landscape mode for our product Astral effects:

http://www.mobile-visuals.com/mobilesoftware.php

We can not use commands as the labels in the GUI, because that would mess up the fullscreen canvas. That is why we have implemented the button labels with drawRect, drawLine and drawString. We could solve the problem with placing the button labels near the keys in landscape mode if could just get vertical centering of the text to work.

This is what OVI wrote:

The labels are not placed near the keys in landscape mode. STEPS TO REPRODUCE: 1. Start the content under test. 2. Explore the content: Menus, Options, Images, and etc... 3. Switch to Landscape Mode. ACTUAL RESULT: The labels are not placed near the keys in landscape mode. EXPECTED RESULT: Labels are places near the keys in each orientation. AFFECTED DEVICES: N92, N93,N93i,E70, E66, N82, N95,N95 8Gb, E90 Communicator, 5730 XpressMusic, 6210 Navigator, 6710 Navigator, 6720 Classic, E52, E55, E75, N79, N85, N86 8MP, N96, 6760 Slide, 6790 Slide,6790 Surge, 5230, 5233, 5235, Nokia 5250, C6, 5530 XpressMusic, 5800 XpressMusic, Nokia C6-00, N97, N97 mini, X6, Nokia C7-00, Nokia N8-00. NOTE#1: The application is signed with Verisign certificate, so the application will not work on the devices Nokia 3610 Fold, Nokia 5310 XpressMusic, Nokia 6263, Nokia 6267 and Nokia 6555

[Tiger79]

I guess that if you have implemented the buttons yourself by using drawRect, drawLine and drawString you can center the drawString right in the vertical middle of the drawRect ?

[MobileVisuals]

Yes,that is how we have implemented it. So do you know any way to get vertical centering of the text to work? Otherwise we will have to create small image files for all the options and then draw these images with vertical centering on landscape mode. I mean for instance one image file with the button text "options" and one image file with the text "select".

[Tiger79]

I am sorry, I cannot follow what you are saying...
I'm afraid that as long as you use .drawString you will have to center the text on a button (being it an image or a drawrect) yourself by doing some calculations...

[MobileVisuals]

I mean just make just make a PNG file with the text "options". I could make that file with GIMP, Photoshop or any other software. I wouldn't use Java to draw the text, I would use GIMP or Photoshop. So I could have the text in the direction that I wanted on the PNG file. Then I could draw that image file vertically centered, since that is possible with the drawImage method. What do you think about this approach?

[Tiger79]

Well I have used that several times :P especially because you can make it look way better than using the canvas.drawxxx methods...
anyways, the downsides are the scalibility (if that's even a word), thus the possibility to scale with different screen sizes, and the memory-usage...
So use PNG (as you mentioned), the lowest possible bits for the quality (if you can manage with 8 bit it would be nice), don't make them too big (not in kilobytes size but in widthxheight pixels size), and if possible combine multiple buttons in one single Image and cut out the individual Images you need out of the single resource...

[ektasrv]

I mean just make just make a PNG file with the text "options". I could make that file with GIMP, Photoshop or any other software. I wouldn't use Java to draw the text, I would use GIMP or Photoshop. So I could have the text in the direction that I wanted on the PNG file. Then I could draw that image file vertically centered, since that is possible with the drawImage method. What do you think about this approach?

This approach of taking text on images makes your application harder for localization to support multiple languages, rethink of this approach. Check out LWUIT it might help.

[MobileVisuals]

Is it possible to do vertical centering of text with LWUIT?

[MobileVisuals]

I have tried every possible combination of anchour points, but none of them centers the images vertically. The image is being displayed horisontally for all of these options. What can I do to get the image being displayed vertically? These are the combinations that I have tried:

g.drawImage(optionsI, screenWidth/2, screenHeight/2, Graphics.VCENTER|Graphics.RIGHT);
g.drawImage(optionsI, screenWidth/2, screenHeight/2, Graphics.VCENTER|Graphics.HCENTER);
g.drawImage(optionsI, screenWidth/2, screenHeight/2, Graphics.VCENTER|Graphics.BOTTOM);
g.drawImage(optionsI, screenWidth/2, screenHeight/2, Graphics.VCENTER|Graphics.TOP);
g.drawImage(optionsI, screenWidth/2, screenHeight/2, Graphics.VCENTER|Graphics.LEFT);

g.drawImage(optionsI, screenWidth/2, screenHeight/2, Graphics.RIGHT|Graphics.VCENTER);
g.drawImage(optionsI, screenWidth/2, screenHeight/2, Graphics.HCENTER|Graphics.VCENTER);
g.drawImage(optionsI, screenWidth/2, screenHeight/2, Graphics.BOTTOM|Graphics.VCENTER);
g.drawImage(optionsI, screenWidth/2, screenHeight/2, Graphics.TOP|Graphics.VCENTER);
g.drawImage(optionsI, screenWidth/2, screenHeight/2, Graphics.LEFT|Graphics.VCENTER);
g.drawImage(optionsI, screenWidth/2, screenHeight/2, Graphics.VCENTER);

[MobileVisuals]

The problem is that I also have an option list, which I also have to place over the left and right soft keys to be approved by OVI. I have drawn this option list with drawline, drawstring and fillrect. You can see how this option list looks like here:

http://www.mobile-visuals.com/op.jpg

How can I place this option list above the left and right soft keys on landscape mode if vertical centering of the text is not possible? If I make png images for the list items and draw them with drawimage, I would have to make blue colored images for the choosen option also. Otherwise it wouldn't be possible to see which option were choosen. This would be 6 images just for the option list and these would only work for one resolution. Is there some other way to solve this than to draw images? Can I use LWUIT to solve this problem?

One alternative would be to flip everything on the screen 90 degrees on landscape mode. Is that possible?

[MobileVisuals]

My app got approved and published by OVI now. It was only necessary to have the buttons displayed over the soft keys. I got it to work by making png images for the buttons.