CODEWITHSUNDEEP
htmlcss
Franciszek Job
Franciszek Job

Reputation: 388

list item's marker lower alpha with brackets shows "c" letter as copyright sign

I am trying to implement an ordered list with letters instead of numbers (I use alpha lower property). When I create third element (with letter "c") it changes automatically into copyright sign. How can I get rid of it?
Here is HTML code:

<!DOCTYPE html>
<!-- saved from url=(0083) -->

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Tytuł dokumentu</title>
<meta name="description" content="Słowa kluczowe."/>


<!--<link href="https://czasopisma.uni.lodz.pl/public/style/article-13.css" rel="stylesheet">-->


<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap" rel="stylesheet"> 

<link rel="stylesheet" href="article-13.css" type="text/css">
</head>

<body>
   
<ol>
    <li>Les  noms  propres  (à  un  individu)  :  les  noms  de  famille,  les  prénoms  (des  protagonistes des BD, mais aussi des personnages réels ou fictifs, liés à la culture pop, à la littérature, à la musique ou au cinéma), les diminutifs ou les déformations des prénoms, et finalement des surnoms :</li>
<div class="blockquote">
    <span><em>Coralie, Ma petite Eloïse, Chester<br>
        Rambo, Janis Joplin, Françoise Dolto<br>
        Margotton Miss Ajaccio</em></span>
    </div>
    
    
    <li>Les  termes  précisant  la  nature  particulière  de  larelation  :  premièrement,  il  s’agit  de  ceux  qui  exploitent  différents  liens  de  parenté,  qui  sont  tout simplement utilisés pour indiquer les membres de famille :</li>
        </li>
            
<div class="blockquote">
    <span><em>Coralie, Ma petite Eloïse, Chester<br>
        Rambo, Janis Joplin, Françoise Dolto<br>
        Margotton Miss Ajaccio</em></span>
    </div>
<li>Quant à la relation symétrique, les formes d’adresse du corpus remplissent de nombreuses fonctions. Leur emploi permet de :</li>
    
    </ol>
    
            
        <h4>2. Fonctionnement discursif des formes d’adresse</h4>
        <p class= "indent">Ainsi,  par  exemple,  la  forme  d’adresse  «  chaton  »,  dans  Ça  va,  chaton  ?adressée directement à l’autre, évoque aussi, indirectement, celui qui parle (« je me retrouve ici », « il y a ici quelqu’un qui m’est cher »). On peut également supposer  que  les  deux  interlocuteurs  se  situent  du  côté  de  la  familiarité  sur  l’axe horizontale et que leur relation paraît relativement symétrique. Quant à la dimension affective, ils sont plutôt « en bons termes », leur échange se fait sur un mode doux. </p>

<ol>
<li>Quant à la relation symétrique, les formes d’adresse du corpus remplissent de nombreuses fonctions. Leur emploi permet de :</li>
<li>placer  les  participants  de  la  situation  dialogale  dans  un  contexte  bien  déterminé, qui permet, à son tour, de différencier les amis très proches, particulièrement  intimes  et  complices,  des  amis  plus  éloignes  (Coralie, papounet, mate, petit bout d’chou, mon trésor),</li>
</ol>


</body></html>

And here is CSS code:

/*Folia Romanica*/

html {
    font-size: 17px;
    font-family: Manrope, sans-serif;
    max-width: 1000px;

    margin-bottom: 2em;
    margin: 0 auto;
    word-spacing: 3px;

}

a {
    color: #007ab2;
}

.article-meta {
    margin-bottom: 5rem;
}

.footnote {
    font-weight: bold;
    color: #007ab2;
    text-justify: left;

}

.orcid {
    color: #f26a38;

}

.italic {
    font-style: italic;
}

.blockquote {
    font-size: 0.85rem;
    margin: 1.875em;
    line-height: 2em;
    word-spacing: 3px;
    text-align: justify;
    padding-left: 2%;
    padding-right: 2%;
}

blockquote.right {
    text-align: right;
    font-size: 0.9rem;
    margin: 1.875em;
    line-height: 2em;
    word-spacing: 3px;


}



h1 {
    font-size: 1.5rem;
    font-family: Manrope, sans-serif;
    margin-top: 2em;
}

h1.title {
    font-size: 2.4rem;
    font-family: Manrope, sans-serif;
    margin-top: 4rem;
    margin-bottom: 2.5;
    line-height: 3rem;

}

.abstract {
    font-size: 1rem;
    padding-top: 0.25rem;
    font-family: Manrope, sans-serif;
    line-height: 1.80;
    word-spacing: 3px;
    text-align: justify;
    text-indent: 0;
}

.abstract p {
    font-size: 1rem;
    padding-top: 0.25rem;
    font-family: Manrope, sans-serif;
    line-height: 1.80;
    word-spacing: 3px;
    text-align: justify;
    text-indent: 0;
}

.keywords {
    font-size: 0.9rem;
    line-height: 1.5;
    margin-top: 1rem;
    margin-bottom: 2.5rem word-spacing 3px;
    font-family: Manrope, sans-serif;
    text-indent: 0%;
}

.keyword_title {
    font-size: 1rem;
    font-family: Manrope, sans-serif;
    font-weight: bold;
    margin-top: 2.5rem;
    text-indent: 0%;

}


.author {
    text-indent: 0%;
    line-height: 1.8rem;
    text-align: justify;
}


h2.author {

    margin-top: 0.2rem;
}

.afiliacja {
    text-indent: 0%;
}

h1 sup {
    font-size: 1.75rem;
    top: -0.8rem;
}

h2 {
    font-weight: bold;
    text-indent: 0%;
    margin-top: 2rem;
    font-size: 1.3rem;
    margin-bottom: 0.3rem;

}


h3 {
    font-size: 1.15rem;
    margin-bottom: 1rem;

}

h4 {
    font-size: 1rem;
    margin-bottom: 1.563em;
    margin-bottom: 0.3rem;
}

h5 {
    font-size: 0.9rem;
    margin-bottom: 0.3rem;
}

h6 {
    font-size: 1rem;
    font-family: Manrope, sans-serif;
    font-weight: normal;
    margin-bottom: 0.3rem;
}

h2, h3, h4, h5, h6 {
    line-height: 1.5;
    font-family: Manrope, sans-serif;
}

p {
    font-family: Manrope, sans-serif;
    font-size: 1rem;
    line-height: 2rem;
    margin-bottom: 0;
    margin-top: 0;
    word-spacing: 3px;
    text-align: justify;
    text-indent: 5%;
}

p.tab {
    margin-left: 1.875em;
    margin-top: 1.875em;
    margin-bottom: 1.875em;
}

p.formula {
    margin-top: 1.875rem;
    margin-bottom: 1.875rem;
    text-align: center;
}



span.rface {
    float: right;
}

li.menu {
    float: left;
    color: #fff;
    padding-top: 0.8rem;
    padding-bottom: 1rem;
    padding-right: 1rem;
    padding-left: 1rem;
    margin: 0;

}

.center {
    text-align: center;
    margin: 0 auto;
}

.body {
    line-height: 2rem;
    word-spacing: 3px;
}

.references {
    line-height: 2rem;
    word-spacing: 3px;
    font-size: 1rem;
}



.podpis_obrazka {
    text-align: center;
    font-size: 0.8rem;
    margin-bottom: 1rem;
    margin-top: 1rem;
    text-indent: 0;
    line-height: 1.6rem;
}


hr {
    margin: unset;
    border-radius: 0px;
}

hr.limiter {
    border: 1px solid rgba(236, 240, 241);
    border-radius: 10px;
    margin-bottom: 2rem;
}

hr.asterisk {
    border: none;
}

hr.asterisk::before {
    content: '***';
    display: block;
    text-align: center;
}

.editors {
    margin-left: 5%
}

.spacing {
    letter-spacing: 0.15em;
}

img .center {
    margin: 1rem auto;
}

figure {
    display: block;
    margin: 0 auto;
}

img {
    display: block;
    max-width: 80%;
    margin: 0 auto;
    margin-bottom: 0.75rem;
    margin-top: 0.75rem;
}

img.orcid {
    display: inline;
    /*
    margin-right: 0.25rem;
    width: 24px;
    height: 24px;
    vertical-align: middle;*/
    margin: 0;
}

#menu-logo img {

    display: block;
    max-width: 30%;
    text-align: left;
    margin-left: 3%;
    padding: 1rem;
}

figcaption {
    text-align: center;
}

.references ol, .bibliography ol {
    padding-left: 2.5rem;
    font-family: Manrope, sans-serif;
    font-size: 1rem;
    line-height: 2;
    word-spacing: 3px;
    text-indent: 0%;
}

.bibliography {
    word-spacing: 3px;
    text-indent: 0%;
    margin-bottom: 1.5rem;
}

.naglowek_tabeli {
    background-color: #9c9c9c;
}

.tytul_tabeli {
    text-align: left;
    text-indent: 0;
    font-size: 0.8rem;
    margin-bottom: 5px;
}

.opis_tabeli {
    caption-side: bottom;
    text-align: left;
    text-indent: 0;
    font-size: 0.8rem;
    margin-top: 5px;
    line-height: 1.6rem;
}

td>ul {
    list-style-type: disc;
    margin: 0;
    padding-left: 5%;
    overflow: hidden;
    list-style: indent 5%;
    line-height: 2rem;
}

ul {
    list-style-type: disc;
    margin: 0;
    padding-left: 70px;
    overflow: hidden;
    line-height: 2rem;

}

ol {
    padding-left: 30px;
    line-height: 2rem;
}

ol {
    counter-reset: list;
    padding-left: 30px;
}

.laparent ol {
    counter-reset: 1
}

.laparent li {
    display: block;
    counter-increment: 1;
}

/* replace the counter before list item with
              open parenthesis + counter + close parenthesis */

.laparent li:before {
    content: " ("counter(1) ") ";
}


li ul {
    padding-left: 40px;
}

td, th {
    padding: 0.4rem;

}


table td {
    border: 1px solid black;
    text-align: left;
    vertical-align: top;

}

table th {
    vertical-align: center;
    border: 1px solid black;
    text-align: center;
}


table {
    border-collapse: collapse;
    margin-bottom: 0.75rem;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

sup, sub {
    vertical-align: top;
    position: relative;
    top: -0.4rem;
    font-size: 0.8em;
    font-weight: bold;
}

blockquote sup .footnote {
    font-size: 0.8em;
    vertical-align: top;
    position: relative;
    font-weight: bold;
}

sub {
    top: 0.4rem;

}

.bottom-images {
    display: block;
}

.underline {
    text-decoration: underline;
}

#menu-logo {
    background-color: #3e8b91;
}

ol>li {
    list-style: none;
    counter-increment: list;
}

ol>li::marker {
    content: counter(list, lower-alpha) ")\a0";
}

ol>li::marker {
    content: "("counter(list, lower-alpha) ")\a0";
}

Just to clarify - "(c)" appears as copyrights sign, but I want it to stay as "(c)"

Upvotes: 2

Views: 173

Answers (1)

Libra
Libra

Reputation: 2595

The font you are using, Manrope, seems to have an automatic conversion for the string (c). You'll need to change the way the letters are displayed, or simply change the font.

If you want to keep using the font, I would suggest using a different font for just the list labels.

@import url('https://fonts.googleapis.com/css2?family=Manrope&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Manrope&display=swap');

body{
   font-size: 17px;
   font-family: Manrope, sans-serif;
}

ol>li {
list-style: none;
counter-increment: list;
}

ol>li::marker {
content: "("counter(list, lower-alpha) ")\a0";
}

ol>li.different::marker{
font-family: Times New Roman;
}
<ol>
  <li>item</li>  
  <li>item</li>  
  <li>item</li>  
  <li>item</li>  
</ol>

<ol>
  <li class="different">item</li>  
  <li class="different">item</li>  
  <li class="different">item</li>  
  <li class="different">item</li>  
</ol>

Upvotes: 2

Related Questions