modifying the arrangement of span elements

Question

modifying the arrangement of span elements

Currently, I am assisting a colleague in crafting articles for scientific journals. Interestingly, various publishers have distinct requirements regarding the format of cited authors in the bibliography. Some demand "last name, first name," while others prefer "first name, last name" (with an ordered list by last name and potentially last names displayed in small caps).

Admittedly, utilizing a database would be more efficient; however, my colleague's expertise does not extend to that level.

If I were to create a basic HTML page with lines similar to this example:

<p><span class="lname">Doe</span>, <span class="fname">John</span></p>

Is there a CSS technique available that would display the line as "John DOE", or would I need to resort to using JavaScript?

html css bibliography

Answer 1

Answer №1

If you want to achieve this layout using flexbox, you can make use of the order property (with some tweaking).

Here is the code snippet (https://jsfiddle.net/sebastianbrosch/7Lqr68ar/):

p {
  display:flex;
}
.fname {
  order:1;
}
.lname {
  order:2;
}
.fname:after {
  content:",\00a0";
}

<p>
  <span class="lname">Doe</span>
  <span class="fname">John</span>
</p>

You can also try a more dynamic solution like this:

#name {
  display: flex;
}
#name.fl .firstname:after {
  content: "\00a0";
}
#name.lf .lastname:after {
  content: ",\00a0";
}
#name.fl .firstname,
#name.lf .lastname {
  order: 1;
}
#name.fl .lastname,
#name.lf .firstname {
  order: 2;
}

<p class="fl" id="name">
  <span class="firstname">John</span><span class="lastname">Doe</span>
</p>
<p class="lf" id="name">
  <span class="firstname">John</span><span class="lastname">Doe</span>
</p>

Pro tip: While this solution works visually, it's recommended to prepare the name properly with PHP or directly from the database in the correct format. Using the order property only affects visual ordering and not the underlying code or accessibility for screen readers.

Answer 2

If you want to achieve this layout using flexbox, you can make use of the order property (with some tweaking).

Here is the code snippet (https://jsfiddle.net/sebastianbrosch/7Lqr68ar/):

p {
  display:flex;
}
.fname {
  order:1;
}
.lname {
  order:2;
}
.fname:after {
  content:",\00a0";
}

<p>
  <span class="lname">Doe</span>
  <span class="fname">John</span>
</p>

You can also try a more dynamic solution like this:

#name {
  display: flex;
}
#name.fl .firstname:after {
  content: "\00a0";
}
#name.lf .lastname:after {
  content: ",\00a0";
}
#name.fl .firstname,
#name.lf .lastname {
  order: 1;
}
#name.fl .lastname,
#name.lf .firstname {
  order: 2;
}

<p class="fl" id="name">
  <span class="firstname">John</span><span class="lastname">Doe</span>
</p>
<p class="lf" id="name">
  <span class="firstname">John</span><span class="lastname">Doe</span>
</p>

Pro tip: While this solution works visually, it's recommended to prepare the name properly with PHP or directly from the database in the correct format. Using the order property only affects visual ordering and not the underlying code or accessibility for screen readers.

Answer 3

Answer №2

One way to fix this issue is by using the float property and hiding the comma in your HTML code.

.lname {float: left; padding-right: 5px;}
.comma {display: none;}

<p><span class="lname">Doe</span><span class="comma">,</span> <span class="fname">John</span></p>

Answer 4

One way to fix this issue is by using the float property and hiding the comma in your HTML code.

.lname {float: left; padding-right: 5px;}
.comma {display: none;}

<p><span class="lname">Doe</span><span class="comma">,</span> <span class="fname">John</span></p>

Answer 5

Answer №3

Here's an innovative twist utilizing data-attributes along with the :before and :after pseudo-elements

If you have a container for your list of authors named .autherContainer that has either the extra class .lnLast or .lnFirst, and the author names are structured as shown, with the last name repeated twice in each version

HTML:

<div class="authorContainer lnFirst">
    <p data-ln-first="Doe, " data-ln-last=" DOE">John</p>
</div>

<div class="authorContainer lnLast">
    <p data-ln-first="Dear, " data-ln-last=" DEAR">Jane</p>
</div>

CSS

.authorContainer.lnFirst p:before {
    content: attr(data-ln-first);
}

.authorContainer.lnLast p:after {
    content: attr(data-ln-last);
}

I made some assumptions based on arranging the lists in a shared container, enabling them to be presented chronologically without adhering to a specific format or unnecessary code additions. However, individual preferences may vary.

Answer 6

Here's an innovative twist utilizing data-attributes along with the :before and :after pseudo-elements

If you have a container for your list of authors named .autherContainer that has either the extra class .lnLast or .lnFirst, and the author names are structured as shown, with the last name repeated twice in each version

HTML:

<div class="authorContainer lnFirst">
    <p data-ln-first="Doe, " data-ln-last=" DOE">John</p>
</div>

<div class="authorContainer lnLast">
    <p data-ln-first="Dear, " data-ln-last=" DEAR">Jane</p>
</div>

CSS

.authorContainer.lnFirst p:before {
    content: attr(data-ln-first);
}

.authorContainer.lnLast p:after {
    content: attr(data-ln-last);
}

I made some assumptions based on arranging the lists in a shared container, enabling them to be presented chronologically without adhering to a specific format or unnecessary code additions. However, individual preferences may vary.

modifying the arrangement of span elements

Answer №1

Answer №2

Answer №3

Similar questions

Step-by-step guide on using JQuery to listen to an event and dynamically add a p element after a button, with the feature to remove it on click

Is there a way to retrieve the href attribute from an <a> tag using PHP?

Tips on organizing elements

Tips for preventing double foreach loops in Laravel when dealing with backward relationships

Position a div at the bottom of another div using Bootstrap

AngularJS Expression Manipulation

Enhanced Firefox functionality with support for multiple columns

Effortless sliding panel that appears on hover and vanishes when mouse is moved away

Adjusting the transparency of the background color seamlessly without the need for an image

Why have the bars been positioned on the left instead of the right, and why does the mobile version require sliding instead of simply accessing the menu through a function?

I am interested in implementing a feature that restricts a particular website from being accessed more than once every 24-hour period by

How to Access a div from another website using jQuery

What is the process for a webpage to save modifications made by JavaScript?

What is the best way to ensure that this encompassing div adjusts its width to match that of its child elements?

What is the best method for generating a comprehensive list of xpaths for a website utilizing Python?

Attempting to locate the element's position using Selenium in Python

How to Delete an Added Image from a Dialog Title in jQuery

showcasing the picture in the email is consistently

The animation-play-state is set to 'running', however, it refuses to start playing

Guide to looping through a map arraylist in JavaScript