Lists in html - italics

1 
<li>my car is a bmw</li>
<li>my other car is a tesla</li>
<li>don't I wish</li>
<ul>
  <li>chevrolet</li>
  <li>pontiac</li>
  <li>nissan</li>
</ul>
<ol>
 <li>chevrolet</li>
 <li>pontiac</li>
 <li>nissan</li>

</ol>
</body>

</html>

Screen Shot 2020-11-04 at 11.22.10 AM

Here, I am playing with lists and I’ve enclosed a screenshot of the result in the browser.
The first block of code is simply a list.
The second - an unordered list.
The last - an ordered list.
I am wondering whether using - li - ul - ol - automatically outputs the result in italics because I thought that italics are the output ONLY when the list is bracketed by - em - tags. I was expecting a regular font in the lists - the italics were a surprise.

2

I see:
Screen Shot 2020-11-04 at 2.48.29 PM

No italics here. Im using the most recent version of chrome on a Macbook Pro with macOS Catalina. The font does look italic a little though, you could use some css to fix that: https://www.w3schools.com/css/css_font.asp

3

Generally, no. While browsers do have some default styles for different tags (for example <cite> may italicize by default), lists should not do this. If I had to guess, I’d say you have a <i> tag somewhere higher in the document which is making everything italic, maybe a <li> that was missing the “l” from a typo?

4

No solitary <i> that I can see but there is a lot of stuff above my lines of code so there might be something in there giving me the unwanted italics. I just removed all lines of code above what I have pasted here and yes! - regular fonts - no italics! Yea! So I’m a happy camper now.

5

no solitary <i> that I can see

6

I guess that an i enclosed in less than / greater than symbols does not show in a reply - there was such an i after solitary in both of my above posts

7

Another technique you can use to figure out what is going on is use the browser developer tools. In Chrome, selecting the text via the Elements Panel will show you the applied CSS styles. Below is an example of what the applied styles for the bold usernames on this page are:

image
image1554×916 89.2 KB

This article (and the Elements Panel section) will help you better understand: https://www.kirupa.com/hodgepodge/chrome_dev_tools_for_frontend_developers.htm

Cheers,
Kirupa

1 Like
8

Same problem as before. You have to use code formatting. I’ve updated your posts.

Inline code formatting use single backticks: <i> is `<i>` (there’s also a button that looks like </> in the formatting toolbar you can use for this)

Multi-line code formatting uses 3 backticks above and below the code:

<html>
</html>

is

```
<html>
</html>
```
9

+1 to the </> button to make this easier :stuck_out_tongue:

<ul>
  <li>chevrolet</li>
  <li>pontiac</li>
  <li>nissan</li>
</ul>

Paste your code, select it, and then just press the </> button:

image
image762×638 29.1 KB

10

I am confused. According to what you have just written, selecting multi lines of code and then pressing the </> button will then make the code readable in a reply. But I thought Senocular said in his reply that 3 bacticks above and below the lines of code are the only way to make the posted code readable in a reply. Unless pressing the number 1 key and then the </> is the equivalent of 3 backticks surrounding your lines of code. I need a bit of straightening out on this.

11

They are all similar.

posting
posting2617×1101 937 KB

:slight_smile:

12

I didn’t say “only” :upside_down_face:

For code blocks, you can either indent by 4 spaces or use backticks. The button in the editor UI will use indent whereas backticks are easier when typing it all out manually. Backticks also also let you specify a language if you want, giving you a little more control than the indent.

<ul>
  <li>chevrolet</li>
  <li>pontiac</li>
  <li>nissan</li>
</ul>

is done with

```html
<ul>
  <li>chevrolet</li>
  <li>pontiac</li>
  <li>nissan</li>
</ul>
```

But if I use

```text
<ul>
  <li>chevrolet</li>
  <li>pontiac</li>
  <li>nissan</li>
</ul>
```

I get

<ul>
  <li>chevrolet</li>
  <li>pontiac</li>
  <li>nissan</li>
</ul>

which doesn’t have the html formatting (coloring). The indent approach will try to guess on its own but won’t always get it right.

The easiest thing to do is stick to the icon. It will get you there 99% of the time.

1 Like
14

Thanks to you - Kirupa and Senocular - both for pointing out the alternate ways to quote code. I like the Icon - 99% approach but I’ll certainly retain the 3 backticks approach in the back (unintentional pun here) of my mind as well.

1 Like
15

Thanks kirupa ;
That is a very cool editor , in your gif .
Is the source code available some where ?
Thanks

16

The editor I’m showing in the GIF is the same as the one you use to reply to posts on the forums. It is from https://www.discourse.org, whose source code is fully available :slight_smile:

17

Thank you :slight_smile: