Skip to content

Instantly share code, notes, and snippets.

@emmasaunders

emmasaunders/index.html

Last active October 22, 2021 10:53
Show Gist options
  • Save emmasaunders/d682fd84b67b304219e49b1e8385b1f8 to your computer and use it in GitHub Desktop.
Save emmasaunders/d682fd84b67b304219e49b1e8385b1f8 to your computer and use it in GitHub Desktop.
Download ZIP
Text alignment (v4)
Raw
readme.md

##Explanation How to get your text where you want it. This block demonstrates differences in text-anchor and dominant-baseline settings. I use dominant-baseline and not alignment-baseline because Firefox seems to ignore alignment-baseline settings.

Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>SVG text alignment using d3 by Emma Saunders of Viz Data Ltd. (UK)</title>
<script type="text/javascript" src="http://d3js.org/d3.v4.min.js"></script>
<style>
html, body {
margin: 0;
padding: 0;
width: 100%;
font-family: arial;
font-size: 20px;
}
circle {
fill: rgba(51,255,0,0.5);
}
line {
fill: none;
stroke: red;
stroke-width: 1.5px;
}
</style>
</head>
<body>
<script type="text/javascript">
var gapY = 50;
var attrs = ['text-anchor','text-anchor','text-anchor','dominant-baseline','dominant-baseline','dominant-baseline','dominant-baseline','dominant-baseline','dominant-baseline','dominant-baseline','dominant-baseline','dominant-baseline','dominant-baseline','dominant-baseline','dominant-baseline','dominant-baseline','dominant-baseline', 'dominant-baseline', 'dominant-baseline', 'dominant-baseline', 'dominant-baseline', 'dominant-baseline', 'dominant-baseline', 'dominant-baseline', 'dominant-baseline', 'dominant-baseline', 'dominant-baseline', 'dominant-baseline', 'dominant-baseline','baseline-shift','baseline-shift','baseline-shift','baseline-shift'];
var settings = ['start','middle','end','alphabetic','ideographic','hanging','mathematical','central','middle','text-before-edge','text-after-edge','before-edge','after-edge','top','text-top','bottom','text-bottom','auto','use-script','no-change','reset-size','ideographic','alphabetic','hanging','mathematical','central','middle','text-after-edge','text-before-edge','sub','super','50%','-20px']
var descs = ['(text-anchor) start','(text-anchor) middle','(text-anchor) end', '(dominant-baseline) alphabetic', '(dominant-baseline) ideographic', '(dominant-baseline) hanging', '(dominant-baseline) mathematical', '(dominant-baseline) central', '(dominant-baseline) middle','(dominant-baseline) text-before-edge','(dominant-baseline) text-after-edge','(dominant-baseline) before-edge','(dominant-baseline) after-edge','(dominant-baseline) top','(dominant-baseline) text-top','(dominant-baseline) bottom','(dominant-baseline) text-bottom','(dominant-baseline) auto','(dominant-baseline) use-script','(dominant-baseline) no-change','(dominant-baseline) reset-size','(dominant-baseline) ideographic','(dominant-baseline) alphabetic','(dominant-baseline) hanging','(dominant-baseline) mathematical','(dominant-baseline) central','(dominant-baseline) middle','(dominant-baseline) text-after-edge','(dominant-baseline) text-before-edge','sub','super','+50%','-20px'];
var svg = d3.select("body").append("svg").attr("id","svg").attr("width","100%").attr("height","100%");
for (var p=0; p<attrs.length; p++) {
var grp = svg.append("g").attr("transform","translate(200,"+gapY+")");
if (p<attrs.length-4) {
grp.append("text").attr(attrs[p],settings[p]).attr("id","text_"+p).text(descs[p]);
} else {
grp.append("text").attr("id","text2_"+p).text("(baseline-shift) ");
var txt = document.getElementById("text2_"+p);
var bb = txt.getBBox();
var txtLen2 = bb.width;
grp.append("text").attr("x",txtLen2).attr(attrs[p],settings[p]).attr("id","text_"+p).text(descs[p]);
}
if (p<3) {
grp.append("circle").attr("cx",0).attr("cy",0).attr("r","5");
} else {
var txt = document.getElementById("text_"+p);
var bb = txt.getBBox();
if (p<attrs.length-4) {
var txtLen = bb.width;
} else {
var txtLen = bb.width + txtLen2;
}
grp.append("line").attr("x1",0).attr("y1",0).attr("x2",txtLen).attr("y2",0);
}
gapY += 50;
}
var svg = document.getElementById("svg");
var bb = svg.getBBox();
svg.style.height = bb.y + bb.height + "px";
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment