Unwanted bullet points in html output using inline HTML formatting

[Macondo_Cuanto]

Whenever I create a R Markdown HTML report using inline HTML formatting, I get output with unwanted bullet points using standard web browsers (e.g. Firefox, Chrome, IE, Vivaldi, etc.). The bullets are not present in the RStudio View Pane, or when using Midori web browser.

Can someone please help me understand what's creating the variation? I'd really like this to display correctly in a common web browser.

Screenshot of issue provided below. Tried adding code snippet, but inline HTML formatting created display issues.

[HanOostdijk]

hello @Macondo_Cuanto ,

when you are editing a new post or a reply in this forum above the edit panel you see a menu with icons.
If you use the sixth from the left (ON A NEW LINE) it will give you 3 backticks, a 'type or paste code here' line and again 3 backticks. You can enter your text here and it will be interpreted as preformatted text without further interpretation (e.g. as HTML). See the example below.

Maybe you can insert in such a way (the relevant part of) the Rmd document with the inline HTML formatting and (the relevant part of) the resulting HTML document?

Example :

while editing you will see:

```
  <ul class="menu">      
      <li><a href="../">Home</a></li>      
      <li><a href="../about/">About</a></li>      
  </ul>
```

and it will show like

  <ul class="menu">      
      <li><a href="../">Home</a></li>      
      <li><a href="../about/">About</a></li>      
  </ul>

I have shown the three backticks part by prefixing and suffixing the block with four backticks

````
```
  <ul class="menu">      
      <li><a href="../">Home</a></li>      
      <li><a href="../about/">About</a></li>      
  </ul>
```
````

And I have shown the four backticks part by prefixing and suffixing the block with five backticks.
And if I would like to show the five backticks I would have to surround them with six backticks.
You will get the idea

[Macondo_Cuanto]

Thanks for the gentle and informative feedback on my first post. I'm sure I'll get better at this with great examples such as yours.

Here's my second attempt at posting my YAML header

---
title: "<summary style='font-size:36px; font-weight:bold; font-family:Helvetica; color:#C00000'>Bullet Points: What The Heck</summary>" 
author: "Aureliano Segundo"
output:
  html_document
---

[HanOostdijk]

Hello @Macondo_Cuanto ,

the Rmd file show below works for me (but I am not sure that it does exactly what you want). Some remarks:

• I made HTML not self_contained. This is not necessary but it allows easier viewing of the contents of the HTML file. After viewing the file you can remove the statement in the YAML or set it to true .
• When you view the HTML file you see that in the CSS summary is linked to list-item and you use summary in your title. This can be the reason for the bullet-point but I don't understand why that is shown in some browsers but not all. I also don't understand why you would like to couple summary to your title, but that is another question.
• When you view the HTML file you see that the title is generated as follows:
  <h1 class="title toc-ignore">Bulletpoints</h1>
  with the corresponding CSS rule:
  h1.title {font-size: 38px;}
• therefore I created the CSS file hoqc.css (the name is arbitrary but the file should be in the same folder as the Rmd file) and indicate in the YAML that it should be used. In the CSS file I overwrite the attributes for h1.title with the ones that you want to give to the title (but omit any reference to summary) .

start of Rmd file

---
title: "Bulletpoints"
author: "Han Oostdijk"
date: "7/30/2021"
output:
  html_document:
    self_contained: false
    css: hoqc.css

---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```

## Dummy section

dummy text

## Contents hoqc.css 
In same folder as Rmd file!
```

h1.title {
   font-size: 36px; 
   font-weight: bold; 
   font-family: Helvetica; 
   color: #C00000 ;
 }
```

end of Rmd file

[Macondo_Cuanto]

Thanks for the CSS file suggestion, @HanOostdijk.

I really appreciated the control and level of customization that inline HTML formatting afforded beyond report headers, but I may need to adopt your CSS file solution to avoid Schrödinger's bullet points. Your suggestion would also reduce clutter in my Rmd file.

As for coupling 'summary' to my title, I'm largely HTML illiterate. I wonder if Hooked on Phonics has an HTML course... But you're right, that's best left to another post.

I'll leave this question open for a while longer in case someone else has a suggestion.

[HanOostdijk]

Hello @Macondo_Cuanto ,
how does your output look when change in your original Rmd file (so without the CSS file)

"<summary style='font-size:36px; font-weight:bold; font-family:Helvetica; color:#C00000'>Bullet Points: What The Heck</summary>"

into

"<span style='font-size:36px; font-weight:bold; font-family:Helvetica; color:#C00000'>Bullet Points: What The Heck</span>"

?

[Macondo_Cuanto]

Thank you, @HanOostdijk. Changing the style type from summary to span resolved the problem. I confirmed that it displays correctly in Chrome, Firefox, Vivaldi, IE, and Midori.