css/jquery: on curly braces of variable height

Question

css/jquery: on curly braces of variable height

1.5k Views Asked by Christian At 12 April 2025 at 18:01

[ This is a follow up from my earlier question Very wide thin curly braces with css or jquery ]

Here is a fiddle drawing curly braces: http://jsfiddle.net/q9Bcb/7/

  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');

  var y = canvas.height;
  var linelength = ( y - 60 ) / 2;

  context.lineWidth = 4;
  context.beginPath();
  context.moveTo(27,10);
  context.arcTo(20,10,20,20,7);

  context.lineTo(20,20+linelength);
  context.arcTo(20,30+linelength,0,30+linelength,7);
  context.arcTo(20,30+linelength,20,40+linelength,7);
  context.lineTo(20,y-20);
  context.arcTo(20,y-10,30,y-10,7);

  context.stroke();

Is there a simpler/nicer way to obtain that ?

Original Q&A

There are 2 best solutions below

**janfoeh** · Answer 1

It's not entirely clear to me, but I assume this is the effect you're going for:

wide curly left brace

How about this: jsFiddle

HTML:

<div class="curly"></div>

JS:

var $brace;

$('.curly').each(function(idx, curly) {

    for (var i=0; i < 20; i++) {
        $brace = $('<span>{</span>');
        $brace.css({left: i});
        $brace.appendTo(curly);
    }

});

CSS:

.curly {
    position: relative;
    height: 3em;
}

.curly span {
    position: absolute;
    font-size: 3em;
}

**user2226755** · Answer 2

You can use d3.js, like this :

//returns path string d for <path d="This string">
//a curly brace between x1,y1 and x2,y2, w pixels wide 
//and q factor, .5 is normal, higher q = more expressive bracket 
function makeCurlyBrace(x1, y1, x2, y2, w, q) {
  //Calculate unit vector
  var dx = x1 - x2;
  var dy = y1 - y2;
  var len = Math.sqrt(dx * dx + dy * dy);
  dx = dx / len;
  dy = dy / len;

  //Calculate Control Points of path,
  var qx1 = x1 + q * w * dy;
  var qy1 = y1 - q * w * dx;
  var qx2 = (x1 - .25 * len * dx) + (1 - q) * w * dy;
  var qy2 = (y1 - .25 * len * dy) - (1 - q) * w * dx;
  var tx1 = (x1 - .5 * len * dx) + w * dy;
  var ty1 = (y1 - .5 * len * dy) - w * dx;
  var qx3 = x2 + q * w * dy;
  var qy3 = y2 - q * w * dx;
  var qx4 = (x1 - .75 * len * dx) + (1 - q) * w * dy;
  var qy4 = (y1 - .75 * len * dy) - (1 - q) * w * dx;

  return ("M " + x1 + " " + y1 +
    " Q " + qx1 + " " + qy1 + " " + qx2 + " " + qy2 +
    " T " + tx1 + " " + ty1 +
    " M " + x2 + " " + y2 +
    " Q " + qx3 + " " + qy3 + " " + qx4 + " " + qy4 +
    " T " + tx1 + " " + ty1);
}

function update() {
  var bracket = d3.select("svg").selectAll("path").attr("class", "curlyBrace").data(coords);

  bracket.enter().append("path").attr("class", "curlyBrace");
  bracket.attr("d", function(d) {
    return makeCurlyBrace(d.x1, d.y1, d.x2, d.y2, 50, 0.6);
  });
  bracket.exit().remove();

  coords.shift();
}

var width = 962;
var height = 502;
var coords = [];
var clickPos = {};

var svg = d3.select("body").append("svg")
  .attr("width", width)
  .attr("height", height)
  .on("mousedown", function() {
    clickPos = {
      "x1": d3.mouse(this)[0],
      "y1": d3.mouse(this)[1]
    };
  })
  .on("mouseup", function() {
    coords.push({
      "x1": clickPos.x1,
      "y1": clickPos.y1,
      "x2": d3.mouse(this)[0],
      "y2": d3.mouse(this)[1]
    });
    update();
  });

.curlyBrace {
  stroke: #000000;
  stroke-width: 10px;
  fill: none;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

<body ontouchmove="BlockMove(event);">
  <p> Click and Drag to draw a bracket </p>
</body>

css/jquery: on curly braces of variable height

There are 2 best solutions below

Related Questions in JQUERY

Related Questions in CSS

Related Questions in BRACES

Trending Questions

Popular # Hahtags

Popular Questions