Label overlap detection


Is there a way to calculate approximate height/width of labels for a given font style.  There is random collection of billboards with labels that we need to display for a specific view rectangle.  There would be cases where a set of billboards are too close together and the labels overlap.  I am thinking of alternately going through overlapping labels and showing one label at a time for 2 seconds or so. 


I was able to approximate the label height to be the pixel font size. For the width I was able to use 2D context measureText function. That was sufficient approximation for my case. I am using font- keming branch which accounts for font kerning:

Create a 2D context with the font I am using like:

var canvas = document.createElement(‘canvas’);

var context2D = canvas.getContext(‘2d’);

context2D.font = ‘18px sans-serif’;

For each label I had to measure did something like:

var dimension = context2D.measureText(“Text To Measure”);

var approxWidth = dimension.width ;

  • Tim