font and placement differences
in
Processing with Other Languages
•
6 months ago
I've been noticing some pretty significant differences involving placements between the Java and JavaScript versions of some small programs I've been making. I've built a test case that's ulta-simple in order to show them, in the hopes that someone can shed some light on what's happening here and how I can code for it (or against it, as the case may be).
Code for the 3D version:
I made no changes to the code other than switching from Java to JavaScript mode, and rotating in 3D to get these angles.
I am not loading any "custom" font, just using the default that is used if you don't specify one.
Here's how it rendered in Java. Notice that the text is roughly in the middle, the image that is the "T" appears to extend from the top of the "T" to the baseline, but not below. Notice also that the image that is the "g" does not extend above the mean line, and does go down to fully show the descender. All good so far, it is what it is.
This next picture is how the same program rendered in JavaScript mode in the current version of Chrome (if you need any other info just let me know). Notice the text is now placed significantly lower, and, the box the "T" is in seems to extend above the top of the letter. Also, the descender is cut off from the "g". I thought the latter might just be the result of the lower positioning, so I changed the y-value (image after this one).
The next image is the result of subtracting 10 from the y-position. Notice that descender is still cut off. Then I wondered (because in this angle I couldn't tell) what the height of the "g" really was, did it extend up as high as the "T"? That's the picture after this one.
Same as above but rotated a bit to see what space the "g" is really taking up.
Which doesn't make any sense to me, as it appears to be as high as the "T" but not low enough for its own descender.
Now, one last image to show an example of when I first saw this happening, while working in 2D. This is identical code, with the Java output window on the left, and the JavaScript output on the right. Clearly two completely different default behaviors are happening. And, it looks to me like two different fonts, as well.
EDIT/UPDATE: So, I did more research, figured out how to get a font specified in the JavaScript version, and re-did the above but now the two fonts are the same, Arial, but the placement within the box is still the same. Since the box dimensions are coming from textAscent() + textDescent() and textWidth() there has to be something different in the way Processing and Processingjs are reporting those.
Code for the 2D versions, followed by code for the 3D version.
2D Version (original):
- String test = "Testing";
- float textheight;
- float textlength;
-
- void setup() {
- size(300, 150);
- smooth();
- noLoop();
- }
-
- void draw() {
- textSize(55);
- textheight = textAscent() + textDescent();
- textlength = textWidth(test);
- rect(40, 40, textlength, textheight); // *1.25
- fill(0);
- text(test, 40, 40+textAscent());
- }
2D version (updated to specify the font):
- /* @pjs font="arial.ttf"; */
- String test = "Testing";
- float textheight;
- float textlength;
- PFont f;
- void setup() {
- size(300, 150);
- f = createFont("arial", 24);
- textFont(f);
- smooth();
- noLoop();
- }
- void draw() {
- textSize(55);
- textheight = textAscent() + textDescent();
- textlength = textWidth(test);
- rect(40, 40, textlength, textheight); // *1.25
- fill(0);
- text(test, 40, 40+textAscent());
- }
- float inout = 3.7999992; //manually set this for the purpose of being identically positioned in both versions
- float spin = 45;
- float step = 0.1;
- float pan = 0.0;
- String test = "Testing";
-
- void setup() {
- size(400, 400, P3D);
- smooth();
- fill(0);
- }
-
- void draw() {
- background(255);
- pushMatrix();
- translate(width/2, height/2);
- rotateY(radians(spin)); // radians(spin)
- scale(inout);
- textSize(20);
- noFill();
- text(test, pan-textWidth(test)/2, 0);
- box(textWidth(test), 40, 40);
- popMatrix();
- }
-
- // this is just code for interacting with the 3D space, and printing out values
-
- void keyPressed() {
- if (key == CODED) {
- if (keyCode == UP) {
- inout += step;
- }
- else if (keyCode == DOWN) {
- inout -= step;
- }
- else if (keyCode == LEFT) {
- spin -= step*10;
- }
- else if (keyCode == RIGHT) {
- spin += step*10;
- }
- }
- else if (key == ' ') {
- println("radianspin = " + radians(spin));
- println("inout = " + inout);
- }
- }
So, that's all the data I have at the moment, so I guess my questions are:
1) is this a known issue, and what what advice can be had for dealing with it?
2) is it because I'm not specifying a "custom" font?
If so (and even if not), can anyone provide me a step-by-step walkthrough for including a custom font--I have tried the few resources I could locate on the topic and absolutely cannot figure out how to make it happen.
(figured this out)
3) are all fonts zero depth so that when you rotate them 90 degrees they disappear completely?
4) backgrounds on the font characters appear to take the background color, but they don't appear to take an alpha value, is that right? The backgrounds can't be made transparent?
5) if you were me, what would you do at this point to further pursue these issues?
EDIT: I've now done more testing, removing everything except the text() command, with various fonts, and the issue seems to me to affect any text rendered with 3D in the JavaScript mode. All fonts I've tested have the bottoms cut off to varying degrees, including the browser's "system" fonts "sans-serif", "serif" and "monospace". But interesting side note, the browser's system fonts's backgrounds are transparent, so the lines show through them as one would expect. Still, text in 3D without descenders isn't really useful. If I'm doing something wrong, please let me know.
Thanks in advance for any reply.
Regards,
Dan
1