2

I am trying to rotate multiple text labels in cartodb/cartocss. I am offseting each label so that they appear to be stacked using text-dx and text-dy. Using text-horizontal-alignment: left; and text-vertical-alignment: bottom; I can control the alignment for unrotated text, but when I use text-orientation: 90; (see documentation) it rotates around the middle and center of the string (i.e., text label).

So, when it is oriented at 90 degrees, it is no longer aligned left (or to the bottom of the page). Since my strings/labels are not all the same length, it causes unpredictable rotated label placement.

Any tips for how I can control the pivot/orientation point when the text is rotated/oriented? Or, is there a way that I can pivot around my marker?

The code I was playing with is here:

    #test_project_los::labels_sl 
    [zoom >= 16]
    {
      text-name: [vol_sl];
      text-face-name: 'DejaVu Sans Book';
      text-size: 13;
      text-horizontal-alignment: right;
      text-vertical-alignment: middle;
      text-label-position-tolerance: 0;
      text-fill: #229A00;
      text-halo-fill: fadeout(white, 40%);
      text-halo-radius: 1;
      text-dy: -20;
      text-dx: -20;
      text-orientation: 90;
      text-allow-overlap: true;
      text-placement: point;
    }

    #test_project_los::labels_st 
    [zoom >= 16]
    {
      text-name: 'Appears way right ' + [vol_st];
      text-face-name: 'DejaVu Sans Book';
      text-size: 13;
      text-horizontal-alignment: right;
      text-vertical-alignment: middle;
      text-label-position-tolerance: 0;
      text-fill: #3E7BB6;
      text-halo-fill: fadeout(white, 40%);
      text-halo-radius: 1;
      text-dy: -20;
      text-dx: -30;
      text-orientation: 90;
      text-allow-overlap: true;
      text-placement: point;
    }

    #test_project_los::labels_sr 
    [zoom >= 16]
    {
      text-name: [vol_sr];
      text-face-name: 'DejaVu Sans Book';
      text-size: 13;
      text-horizontal-alignment: right;
      text-vertical-alignment: middle;
      text-label-position-tolerance: 0;
      text-fill: #FF2900;
      text-halo-fill: fadeout(white, 40%);
      text-halo-radius: 1;
      text-dy: -20;
      text-dx: -40;
      text-orientation: 90;
      text-allow-overlap: true;
      text-placement: point;
    }
  • It would be useful to see a screenshot of what the problem looks like. – Bill Morris Aug 2 '14 at 2:05
  • Here is a screenshot showing my label alignment problem. The rotated (i.e., vertically oriented) label alignment is inconsistent and the position drifts depending on how long the string is. – Dave Aug 26 '14 at 15:31
2

It may be more data preprocessing than you'd like, but I suggest

  1. Try to put every line of the "stacked" cluster of labels into a single field with a delimiter of some sort ("label1, label2, label3, etc.")
  2. Use text-wrap-character to create your line breaks

This way your "label stack" will actually have a single anchor point, though the text consists of multiple lines.

  • Thank, Bill. That is a great idea. With some playing around with the alignment properties, I got it to work and I think it will do for now. However, the placement point of the text still varies depending on how long the longest line/string is of the label. My code is below: – Dave Aug 2 '14 at 15:00
1

The new code using a multiline label method suggested by Bill and documented here.

If anyone know an even better way to control the placement of rotated/oriented text, please add your thoughts.

My new code:

    #test_project_los::labels_sb 
    [zoom >= 16]
    {
      text-name: [vol_sr] + '_' + [vol_st] + '_' + [vol_sl];
      text-wrap-width: 1;
      text-wrap-character: '_';
      text-face-name: 'DejaVu Sans Book';
      text-size: 14;
      text-horizontal-alignment: left;
      text-vertical-alignment: bottom;
      text-align: left;
      text-label-position-tolerance: 0;
      text-fill: #229A00;
      text-halo-fill: fadeout(white, 20%);
      text-halo-radius: 2;
      text-dy: -60;
      text-dx: -20;
      text-orientation: 90;
      text-allow-overlap: true;
      text-placement: point;
    }
  • Here is a screenshot showing my label alignment problem. The rotated (i.e., vertically oriented) label alignment is inconsistent and the position drifts depending on how long the string is. – Dave Aug 26 '14 at 15:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.