css - disc - li: before{content: "■";}¿Cómo codificar este personaje especial como un Bullit en un correo electrónico?

css content special characters

Question

Después de colorear con orgullo mi viñeta de lista de etiquetas sin etiquetas de imagen url o span , a través de:

ul{ list-style: none; padding:0;  margin:0;  }
li{ padding-left: 1em; text-indent: -1em;    }
li:before { content: "■"; padding-right:7px; }

Aunque estas hojas de estilo funcionan perfectamente hasta los bordes redondeados y otras cosas css3, y aunque el destinatario del correo electrónico (por ejemplo, Eudora OSE 1) representa todos los estilos CSS correctamente, al igual que en un navegador, hay un problema: las balas • o ■ convertido en &#adabacadabra;

Apareciendo finalmente así en los correos electrónicos:

¿Cómo procedo desde aquí?

Answer 1

El convertidor de Lea ya no está disponible. Acabo de usar este converter

Pasos:

1. Ingrese la versión decimal Unicode como 8226 en el campo de entrada verde de la herramienta.
2. Presione Dec code points
3. Ver el resultado en el cuadro de la Unicode U+hex notation (por ejemplo, U + 2022)
4. Úselo en su CSS. Por ejemplo, content: ''/2022''

PD. No tengo conexión con el sitio web.

Answer 2

Este sitio web podría ser útil,

http://character-code.com

aquí puedes copiarlo y ponerlo directamente en css html

Answer 3

No debe usar LI en el correo electrónico. Son impredecibles entre los clientes de correo electrónico. En su lugar, debe codificar cada punto de viñeta de esta manera:

<table width="100%" cellspacing="0" border="0" cellpadding="0">
    <tr>
        <td align="left" valign="top" width="10" style="font-family:Arial, Helvetica, Sans-Serif; font-size:12px;">&bull;</td>
        <td align="left" valign="top" style="font-family:Arial, Helvetica, Sans-Serif; font-size:12px;">This is the first bullet point</td>
    </tr>
    <tr>
        <td align="left" valign="top" width="10" style="font-family:Arial, Helvetica, Sans-Serif; font-size:12px;">&bull;</td>
        <td align="left" valign="top" style="font-family:Arial, Helvetica, Sans-Serif; font-size:12px;">This is the second bullet point</td>
    </tr>
</table>

Esto asegurará que sus viñetas funcionen en cada cliente de correo electrónico.

Answer 4

Nunca me he enfrentado a este problema antes (no he trabajado mucho en el correo electrónico, lo evito como la peste) pero puedes intentar declarar el punto con el punto de código Unicode (notación diferente para CSS que para HTML): content: ''/2022'' . (debe usar el número hexadecimal, no el decimal 8226)

Entonces, en caso de que utilice algo que recoja esos caracteres y los codifique en entidades HTML (que no funcionarán para cadenas de CSS), supongo que ignorará eso.

Answer 5

Puedes intentar esto:

ul { list-style: none;}

li { position: relative;}

li:before {
    position: absolute;  
    top: 8px;  
    margin: 8px 0 0 -12px;    
    vertical-align: middle;
    display: inline-block;
    width: 4px;
    height: 4px;
    background: #ccc;
    content: "";
}

Me funcionó, gracias a esta post .

Answer 6

Te enfrentas a un problema de doble codificación.

■ y • son absolutamente equivalentes entre sí. Ambos se refieren al carácter Unicode ''BULLET'' (U + 2022) y pueden existir lado a lado en el código fuente HTML.

Sin embargo, si ese código fuente está codificado en HTML de nuevo en algún momento, contendrá ■ y • . El primero se presenta sin cambios, el último aparecerá como "& # 8226;" en la pantalla.

Este es el comportamiento correcto bajo estas circunstancias. Necesita encontrar el punto donde ocurre la segunda codificación HTML superflua y deshacerse de ella.