Announcement

Collapse
No announcement yet.
X
  • Filter
  • Time
Clear All
new posts

    Problems with text appearance in a DrawLabel

    We have a problem with the appearance of text displayed in a DrawLabel (com.smartgwt.client.widgets.drawing.DrawLabel). Dependent from font height and letter combination, the distance between the letters is not unique.
    The image illustrates the behavior on the left side. For contrast, at right side the same text is displayed in a Label (com.smartgwt.client.widgets.Label). Here the distance between the letters is unique.
    Is it possible to display the text in a DrawLabel with the same behavoir as in the Label ?
    We can not use a Label for our application, since we have the requirement of rotation of the text.
    SmartGwt 6.0-p20160910, also observed at 4.1, Browser Chrome and Firefox

    Code snipset:

    Code:
        private static final String TEXT =
            "mpsmpsmpsmps abcdefghijklmnopqrstuvwxyz";
        private static final int HEIGHT = 60;
        private static final int WIDTH = 800;
        private static final int GAP = 10;
        private static final int LEFT = 20;
        private static final int TOP = 20;
    
        private double getZoom(int index)
        {
            return 1 + (index * 0.15);
        }
    
        private DrawPane createDrawPane(int index)
        {
            DrawPane drawPane = new DrawPane();
            drawPane.setLeft(LEFT);
            drawPane.setTop(TOP + (index * (HEIGHT + GAP)));
            drawPane.setWidth(WIDTH);
            drawPane.setHeight(HEIGHT);
            drawPane.setBackgroundColor("#FFFF00");
            drawPane.setZoomLevel(getZoom(index));
            return drawPane;
        }
    
        private DrawLabel createDrawLabel()
        {
            DrawLabel drawLabel = new DrawLabel();
            drawLabel.setContents(TEXT);
            drawLabel.setLeft(5);
            drawLabel.setTop(5);
            drawLabel.setFontFamily("Arial");
            drawLabel.setFontSize(12);
            drawLabel.setFontWeight("bold");
            drawLabel.setLineColor("#000000");
            drawLabel.setAlignment("Left");
            return drawLabel;
        }
    
        private Label createLabel(int index)
        {
            Label label = new Label();
            label.setLeft(LEFT + GAP + WIDTH);
            label.setTop(TOP + (index * (HEIGHT + GAP)));
            label.setWidth(WIDTH);
            label.setHeight(HEIGHT);
    
            label.setAlign(Alignment.LEFT);
            int heigth = (int) (10 * getZoom(index));
            String font = "font:bold " + heigth + "pt Arial;nowrap;color:#000000";
    
            String contents = "<div style=\"" + font + "\">" + TEXT + "</div>";
            label.setContents("");
            label.setContents(contents);
            return label;
        }
    
        protected void createContent(Layout parent)
        {
            for ( int ii = 0; ii < 12; ii++ )
            {
                DrawPane drawPane = createDrawPane(ii);
                DrawLabel drawLabel = createDrawLabel();
                Label label = createLabel(ii);
    
                drawPane.addDrawItem(drawLabel, true);
                parent.addChild(drawPane);
                parent.addChild(label);
            }
        }
    Attached Files

    #2
    DrawLabels are drawn by the native HTML5 capability, and on some browsers on some computers this can differ from normal HTML in details such as text kerning. Unfortunately web applications do not have control over these details of rendering.

    Comment

    Working...
    X