make diffetent word in html to be vertically aligned

AAEM
April 15, 2024
146 views
0 votes
2 Answers

I am trying to get the following in HTML page where the start of words inside the red ovals are vertically aligned:

but I got the following:

Here is the code that gave me the previous output:

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <title>Aligned Arabic Text</title>
    <style>
        /* Container styling */
        .container {
            width: 400px; /* Set a specific width */
            direction: rtl; /* Use right-to-left text direction */
        }

        /* Each line styling */
        .line {
            display: flex; /* Use flexbox for layout */
            justify-content: flex-start; /* Align content to the left in RTL */
        }

        /* Label styling */
        .label {
            margin-left: 10px; /* Add margin on the left */
        }

        /* Colon styling */
        .colon {
            width: 20px; /* Fixed width to align colons */
            text-align: left; /* Align colon to the left */
            margin-right: 10px; /* Add margin to the right of the colon */
        }
    </style>
</head>

<body>
    <div class="container">
        <!-- First line -->
        <div class="line">
            <span class="label">التوقيع</span> <!-- Signature -->
            <span class="colon">:</span>
            <span>أحمد العلى</span> <!-- Name of the person who made the signature -->
        </div>
        <!-- Second line -->
        <div class="line">
            <span class="label">الاسم</span> <!-- Name -->
            <span class="colon">:</span>
            <span>أحمد العلي</span> <!-- Name of the person who made the signature -->
        </div>
        <!-- Third line -->
        <div class="line">
            <span class="label">المنصب</span> <!-- Position -->
            <span class="colon">:</span>
            <span>مدير</span> <!-- Position of the person who made the signature -->
        </div>
    </div>
</body>
</html>

Answers

Well, I don’t know if I understood your question very well, but, from what you understand, you want to do something like: Always put ":" after the names and the best alternative for you to do this is using a javascript array and activating its attributes because , this way you gain dynamism. Here’s an article about: Javascript – Use array values dynamically in HTML

And one example:

const activities = [{ "activityOwner": "Raymond Carlson", "activityDesc": "Complete all the steps from Getting Started wizard"}, {"activityOwner": "Flopsy McDoogal","activityDesc": "Called interested in March fundraising Sponsorship" }, { "activityOwner": "Gary Busy", "activityDesc": "Get approval for price quote" }]

const html = activities.map(obj => {
  let item = document.querySelector('#template').innerHTML;
  item = item.replace('{owner}', obj.activityOwner);
  item = item.replace('{desc}', obj.activityDesc);
  return item;
});
document.querySelector('#list').innerHTML = html.join('');

<div id="list"></div>

<template id="template">
  <div class="container">
    <div class="row"></div>
    <div class="qa-message-list">
      <div class="message-item">
        <div class="message-inner">
          <div class="message-head clearfix">
            <div class="user-detail">
              <h5 class="handle">
                <p class="activityowner">{owner}</p>
              </h5>
              <div class="post-meta"></div>
            </div>
          </div>
          <div class="qa-message-content">
            <p class="activitydesc">{desc}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

If I understand the question correctly, you need a subgrid:

.container {
  width: max-content; 
  direction: rtl;
  display: grid;
  grid-template-columns: repeat(3, max-content);
  margin: 0 auto;
  gap: 8px;
}

.line {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: span 3;
}

<div class="container">
    <!-- First line -->
    <div class="line">
        <span class="label">التوقيع</span> <!-- Signature -->
        <span class="colon">:</span>
        <span>أحمد العلى</span> <!-- Name of the person who made the signature -->
    </div>
    <!-- Second line -->
    <div class="line">
        <span class="label">الاسم</span> <!-- Name -->
        <span class="colon">:</span>
        <span>أحمد العلي</span> <!-- Name of the person who made the signature -->
    </div>
    <!-- Third line -->
    <div class="line">
        <span class="label">المنصب</span> <!-- Position -->
        <span class="colon">:</span>
        <span>مدير</span> <!-- Position of the person who made the signature -->
    </div>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.