Changing bullet points numbered lists to Right-Aligned in SolidWeb.

This guide is essential for anyone working with right-to-left languages in SolidWeb, as it provides a straightforward method to correctly align bullet points and numbered lists. It simplifies the process by allowing users to copy and paste HTML snippets without needing extensive coding knowledge. By following the steps outlined, you can enhance readability for native speakers and ensure proper formatting in your content. Don't miss this opportunity to improve your posts' accessibility and appearance.

Chris Skelly
12 steps
2 minutes

Google

Uaw

When posting content on SolidWeb that is in a different language, sometimes the text reads right to left and is aligned right. Many times, when you paste this language in from a Microsoft Word document, it's already aligned to the right. Unfortunately, that only fixes most of the formatting. Some elements, such as bullet points (unordered lists) are still aligned to the left. This can be confusing to the native language speaker, and incorrect for a language that reads right to left. To fix this issue, we need to take some steps to change the HTML markup tag in the source code. But don't worry, you won't need to know how to write HTML or CSS, as you'll be copying and pasting a snippet of markup into the source code.

The first step is telling SolidWeb that we need to make edits to the source code. In the "Text format" dropdown, select the "Full HTML" option. We will now be able to save edits to the source code.

Copy this HTML markup tag: <ul dir="rtl">

Tip! Is your list a numbered list and not a bullet point list? No problem! the tag we'll replace is [[<ol>]] and the tag we'll replace it with is : [[<ol dir="rtl">]]

Click this icon. (if your browser is big enough the "source" button will be visible)

Click "Source"

Now we need to replace the [[<ul>]] tag with the one we've copied [[<ul dir="rtl">]]. Many browsers will open the find on page box by pressing "CTRL" + "F" on your keyboard (CMD + F on mac). Once the box appears, type "<ul>". And it should highlight the tag that you need to replace with the new one.

Click and drag to select the entire <ul> tag.

Right-click and paste in the new tag.

You should now see the new unordered list tag pasted in to replace the old <ul> tag.

Alert! If there are multiple unordered lists, you'll have to do this for each one. Once you have done this for each instance, move onto the next step.

Now we will toggle out of source mode. Click this icon.

Click "Source"

Scroll down to your bullet point list(s) to see if the change was made.

Changing bullet points numbered lists to Right-Aligned in SolidWeb.

Chris Skelly
12 steps
2 minutes

Google

Uaw

The first step is telling SolidWeb that we need to make edits to the source code. In the "Text format" dropdown, select the "Full HTML" option. We will now be able to save edits to the source code.

Copy this HTML markup tag: <ul dir="rtl">

Tip! Is your list a numbered list and not a bullet point list? No problem! the tag we'll replace is [[<ol>]] and the tag we'll replace it with is : [[<ol dir="rtl">]]

Click this icon. (if your browser is big enough the "source" button will be visible)

Click "Source"

Click and drag to select the entire <ul> tag.

Right-click and paste in the new tag.

You should now see the new unordered list tag pasted in to replace the old <ul> tag.

Alert! If there are multiple unordered lists, you'll have to do this for each one. Once you have done this for each instance, move onto the next step.

Now we will toggle out of source mode. Click this icon.

Click "Source"

Scroll down to your bullet point list(s) to see if the change was made.