Rounded

Encompassing a square box with a round ball.

The jQuery function .square() isn’t particularly intersting in itself. It does, however create a canvas for something more useful — text that fits into a circle. Use it for calls to action, breakout text, badges or just to be novel, if you must.

The development gist.

  • We’re wrapping an element shaped with border-radius around an existing square element, made either through direct CSS styles or by using my .square() jQuery plugin. The initial diameter is equal to the hypotenuse of the square. This produces something technically correct, but unsightly — there’s too much white space around the text.
  • The size of the encompassing circle is ajusted with the sizeRatio property in the configuration object, where the number one is the starting point. “.5” is half the circle diameter. “2” is double size. The vertical offset can be adjusted with verticalOffset using the same number strategy.
  • With the calculations done, we simply apply the wrapped element.
  • As with the .square() function, calling this on document.ready will result in incorrect calculations if you’re using a font-face declaration— the font won’t render in time before the document.ready fires. As I am currently not using a font service that offers a font-load event, I’m running this twice — once to establish a placeholder at document.ready and again, after applying a different font-only CSS class, at window.load to catch the loaded font. Note the .ball() function detects and unwraps the parent element if necessary.

Other thoughts

Visually, while the circle surrounds the text, it clearly does not function as a clipping mask — the circle is mere veneer. Iteration two of this could certainly calculate left- and right- margins for each line of text to allow the copy to flow more inline with the circle.

Calling anything on window.load makes me cranky. Eventually, through coding or third-party library, I’ll run this off a font-load event and eliminate the extra function call.

Click the thing to do the other thing!
jQuery.fn.ball = function(config){ /*Counterpart to .square() function. Wraps an element around the square element and applies a border-radius.*/ var defaults = { sizeRatio:1 , verticalOffset:1 , className : 'ball fill' } , s = $.extend(defaults, config) ; function hyp(x,y){ return Math.sqrt(Math.pow(x,2) + Math.pow(y,2)); } return this.each(function(i,e){ var base = $(e) , dims = hyp(base.width(), base.height())*s.sizeRatio , xyOffset = (dims - base.width())/2 ; if(base.parent().hasClass(s.className)){ base.unwrap(); } base.css({ left: xyOffset , position: 'relative' , top: xyOffset * s.verticalOffset }).wrap('
').parent().css({ borderRadius:'50%' , height : dims , width : dims }); }); };