Arrangement of words within a silhouette

I am looking to insert text into a specific shape. The parameters I have include the font, text width, text height, and margin of the text. The text is positioned within a shape with coordinates x and y. Here is an example image:

https://i.sstatic.net/MpqDf.png

Below is the SVG that I am currently generating:

<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>

My goal is to adjust the position of the text within the rectangle shape based on its coordinates. Here is the desired result:

https://i.sstatic.net/oTLez.png

And this is the SVG layout I am aiming for:

<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>

How can I use JavaScript to accurately position and calculate the x and y values of the text?

htmlcss

Answer №1

Hmm... Is this what you're searching for?

* {font-family: 'Consolas', 'Courier New', monospace; line-height: 1;}
.classDiagram {border: 1px solid #666; text-align: center; width: 175px;}
.classDiagram .header {border-bottom: 1px solid #666; padding: 5px;}
.classDiagram .content {min-height: 100px; padding: 5px}
<div class="classDiagram">
  <div class="header">processSample</div>
  <div class="content">sectionOne</div>
</div>

Preview:

You can experiment with the line-height, min-height. A default min-height is provided to ensure consistency in similar diagrams.

Answer №2

It's difficult to determine without seeing the code.

If the content is within a table, you can apply CSS:

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

Otherwise, using padding-top: 10px; along with positioning should do the trick.

You don't need JavaScript when CSS can handle it all.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Divide an HTML file into separate documents upon submitting a form

Is there a way to input HTML into a text area, then upon submission, have the system read the file, identify the class selector, and separate the HTML into multiple files saved in a directory? If you have any thoughts on how this could be accomplished, pl ...

javascriptphpjqueryhtmlforms

ng-bind-html not refreshed following ng-click triggering

Recently, I started learning about the MEAN stack. I have implemented an ng-repeat in my HTML code that displays a list of titles. Each title has an ng-click function attached to it, which is supposed to show more details in an overlay popup. blogApp.co ...

javascripthtmlangularjs

The function within the React component is failing to produce the expected output

After importing two types of images (IMG and IMG2), I wanted to display IMG when the viewport width is less than 600px, and IMG2 when it's equal to or greater than 600px. I created a function to determine the viewport width and return the respective i ...

javascripthtmlcssreactjs

Using JQuery to extract the unique identifiers of nodes within a tree view format for the purpose of storing data according to these identifiers

Using Angular to display data in the view, I have a sample code here. When a specific age group category is clicked, I want to populate a form with data and save the entire dataset, including the parent node IDs. I am facing an issue with fetching the pa ...

javascriptjqueryangularjshtmldom

What is the process for applying CSS styles to a particular component?

What is the recommended way to apply CSS styles to a specific component? For instance, in my App.js file, I have added Login and Register components for routing purposes. In Login.css, I have defined some CSS styles and then imported it into Login.js. T ...

cssreactjsreact-router

Are the links drifting to the left?

Some of the links on my website seem to be misbehaving and not following the CSS rules, floating to the left unexpectedly. Strangely, it's only the links that are affected; the rest of the text appears fine. For example, you can observe this issue at ...

htmlcsswordpress

Is there a way to create a new perspective for Ion-Popover?

Looking for a solution: <ion-grid *ngIf="headerService.showSearch()"> <ion-row id="searchbar" class="main-searchbar ion-align-items-center"> <ion-col size="11"> ...

htmlcssangularionic-framework

Customizing the main icon in the Windows 10 Action Center through a notification from Microsoft Edge

I am facing an issue with setting the top icon of a notification sent from a website in Microsoft Edge. Let's consider this code as an example: Notification.requestPermission(function (permission) { if (permission == "granted") { new ...

javascripthtmlnotificationswindows-10microsoft-edge

Using jQuery to create a dynamic fullscreen background image that responds to mouse movement

I am currently working on creating a dynamic full screen background that responds to the movement of the mouse. The idea is that as you move the mouse around, the background image will shift accordingly. For instance, if you were to move the mouse to the ...

jquerycssbackgroundviewport

A guide to injecting HTML banner code with pure Vanilla Javascript

Looking for a solution to incorporate banner code dynamically into an existing block of HTML on a static page without altering the original code? <div class="wrapper"><img class="lazyload" src="/img/foo01.jpg"></div> <div class="wrapp ...

javascripthtmlcsscss-selectors

Move the scroll bar outside of the div and set it to automatically overflow

My issue involves a small div with the CSS property overflow:auto;. However, when the scroll bar appears, it covers up a significant portion of the div. One possible solution is to use overflow:scroll;, but this can result in an unsightly faded scroll bar ...

htmlcss

The table is not properly displaying within the parent scrolled div due to issues with the fixed positioning

Apologies for any language barrier. I am encountering an issue with a PHP page that includes a table meant to be displayed as position:fixed; however, it consistently appears above the scrollbars and does not stay within the parent div. View screenshot he ...

htmlcss

Using plain JavaScript (without any additional libraries like jQuery), you can eliminate a class from an element

I'm attempting to locate an element by its class name, and then remove the class from it. My goal is to achieve this using pure JavaScript, without relying on jQuery. Here is my current approach: <script> var changeController = function() { ...

javascripthtmlcss

Eliminate the header top margin in Bootstrap

HTML <div class="container-fluid"> <div class="row"> <div class="page-header header_site"> <h1><font>ABC Company</font></h1> </div> </div> </div> CSS Code: .header_site { b ...

htmlcsstwitter-bootstrap-3

Using Selenium with Java to interact with elements on a webpage, I encountered an issue where I was unable to click

I utilize Selenium for purposes other than web testing; my main goal is to extract and modify text from a website. Specifically, I use it within an additional editor to manipulate content on Confluence. The text I extract often contains various formatting ...

javahtmlseleniumweb-testing

Steps to implementing a function just before a form is submitted

Imagine a scenario where you have the following HTML form: <form action="myurl.com" method="post" id="myForm"> <input type="number" name="number" class="numberInput"> <input type="number" name="number"> <input type="submit ...

javascripthtmlforms

Tips for adding a string variable to a JQuery HTML element attribute

Hi there, I've been working on a JQuery code to append data to a div element and it's been successful so far. Here is the code: $('#conversation').append('<div id="receiver"><p><b>' + username + ':< ...

javascriptjqueryhtml

Implementing jQuery's live() method to handle the image onload event: a guide

Looking to execute a piece of code once an image has finished loading? Want to achieve this in a non-intrusive manner, without inline scripting? Specifically interested in using jQuery's live() function for dynamically loaded images. I've attemp ...

javascripthtmlonloadjquery

Button in HTML not responsive to clicks

I'm facing an issue with my HTML button as it's not clickable at all. I suspect it may be related to incorrect div settings or a background issue. Can someone advise on what setting needs to be changed for the "sign the petition" link to become ...

phphtmlbuttonclick

When you apply margins in CSS and HTML, it can cause elements to break out of the row alignment

I'm struggling with my html code that contains elements arranged in rows: <div class = "row"> <div class="col-sm-3 cont-box"> <h1>Title1<h1> </div> <div class="col-sm9 cont-box"> <img src="onepic.jpeg" class=" ...

htmlcss