Placement of text in a shape

Question

I want to place a text in a shape. I have: font, textWidth, textHeight, margin of the text. the text is placed into a shape which has its coordinates x and y : so what i'm getting is this :

this is the svg that i generate :

<g  class='nodeGroup' transform='translate(43,-66)' style='-webkit-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); touch-action: none;'>
<rect stroke='lightgray' fill='#FEFEF5' x='0' y='0' width='260' height='618' padding='0,0,0,0' marginBottom='0' marginLeft='0' marginRight='0' marginTop='0'/>
<text fill='black' x='98' y='8' width='64' height='14' padding='0,0,0,0' cursor='default' angle='0' font='14px Calibri Bold'  horizontalAlignment='center' marginBottom='8' marginLeft='0' marginRight='0' marginTop='8' textHeight='14' textWidth='60' verticalAlignment='top'>
processtest</text>
<line stroke='lightgray' fill='none' x='0' y='30' x1='0' y1='30' x2='260' y2='30' width='260' height='0' padding='0,0,0,0' marginBottom='0' marginLeft='0' marginRight='0' marginTop='0'/>
</g>

<g  class='nodeGroup' transform='translate(43,-36)' style='-webkit-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); touch-action: none;'>
<rect stroke='lightgray' fill='#FEFEF5' x='0' y='0' width='260' height='588' padding='0,0,0,0' marginBottom='0' marginLeft='0' marginRight='0' marginTop='0'/>
<text fill='black' x='113' y='8' width='34' height='14' padding='0,0,0,0' cursor='default' angle='0' font='14px Calibri Bold' horizontalAlignment='center' marginBottom='8' marginLeft='0' marginRight='0' marginTop='8' textHeight='14' textWidth='30' verticalAlignment='top'>lane0</text>
</g>

And i'm trying to place the text in the right position compared with the rectangle shape coordinates, what i want to get :

and this is the svg that i want to get :

<g class="nodeGroup" transform="translate(43,-66)" style="-webkit-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); touch-action: none;">
    <rect stroke="#2e3d54" stroke-width="2" fill="#FEFEF5" x="0" y="0" width="260" height="618" />
    <text fill="black" cursor="default" x="100" y="19" style="font:14px Calibri Bold;">processtest</text>
    <line stroke="#2e3d54" stroke-width="1" fill="none" x1="0" y1="30" x2="260" y2="30" />
 </g>
 <g  class="nodeGroup" transform="translate(43,-36)" style="-webkit-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); touch-action: none;">
    <rect stroke="#2e3d54" stroke-width="2" fill="#FEFEF5" x="0" y="0" width="260" height="588" />
    <text fill="black" cursor="default" x="115" y="19" style="font:14px Calibri Bold;">lane0</text>
 </g>

Using javascript, how can i place the text and calculate its x and y ?

We need code samples. Also, why do this with JavaScript? Styling is usually done with CSS. My first hunch ist that you're looking for [`line-height`](https://developer.mozilla.org/en/docs/Web/CSS/line-height), just as was the case [in this question](http://stackoverflow.com/questions/8865458/how-to-align-text-vertically-center-in-div-with-css). Also, why are you concerning yourself with the coordinates of the box? If the text is within the box (a child), relative positioning should be possible and is preferred in most cases. — domsson, Jan 11 '16 at 14:16

score 1 · Answer 1 · answered Jan 11 '16 at 14:22

1

Er... Are you looking for something like this?

* {font-family: 'Consolas', 'Courier New', monospace; line-height: 1;}
.classDgm {border: 1px solid #666; text-align: center; width: 175px;}
.classDgm .head {border-bottom: 1px solid #666; padding: 5px;}
.classDgm .body {min-height: 100px; padding: 5px;}

<div class="classDgm">
  <div class="head">processTest</div>
  <div class="body">lane0</div>
</div>

Preview:

You might play around with the line-height, min-height. I have given a min-height, just in case to align all the other similar diagrams with it.

answered Jan 11 '16 at 14:22

Praveen Kumar Purushothaman

154,660
22
177
226

i generate the svg with javascript, so i should use js code to place the text in the shape – ameni Jan 11 '16 at 14:27
@ameni Can you kindly show the JS Code and everything, that generates you this? So that we can effectively debug. Kindly create a http://jsbin.com out of it. `:)` Will be more helpful and easier. – Praveen Kumar Purushothaman Jan 11 '16 at 15:10

score -1 · Answer 2 · edited Jan 11 '16 at 18:23

-1

Without code it’s hard to tell.

If it is in a table try using CSS:

text-align: center;
vertical-align: middle;

else the padding-top: 10px; should work with positioning.

There is no need for JavaScript when CSS can get it all done.

edited Jan 11 '16 at 18:23

Sebastian Simon

14,320
6
42
61

answered Jan 11 '16 at 14:21

Christopher Almond

80
9

Placement of text in a shape

2 Answers2