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

The browser is opting to download the HTML file rather than displaying it

Get rid of the .php extension in the URL completely

Utilize a unique font exclusively for Internet Explorer

The functionality of Small Caps is not supported by Twitter Bootstrap when using Chrome browser

Is there a way to keep this table fixed in place as the user scrolls?

Django: Troubleshooting problem with offcanvas PDF preview iterations

Changing the color of an image with a click event in HTML

Persisting Big IndexedDB in the Browser

What is the best way to line up two forms side by side?

What is the best way to connect a fresh post to a different URL in ReactJS and Redux?

Utilize jQuery to extract various input/select box values and compile them into an array for submission using .ajax()

When viewing a webpage on a small browser, the content will automatically expand to fill the

Show only the selected option with jQuery's on change event and disable or remove the other options

Could one harness the power of SO's script for adding color to code within questions?

Kohana ajax causing removal of JQuery Data attributes

npm installation for phonegap failed due to shasum check discrepancy

AngularJS: ng-show causing flickering issue upon page refresh

A technique for adding a border to a Mat Card that mimics the outline of a Mat Form Field within a custom

Enable scrolling exclusively for the content within a tab, without affecting the tab label in Clarity Tabs

Running PHP code within an HTML file served by PHP