Тяжелый флажок не отображается в электронной почте, как в HTML - PullRequest
Новая
       12

Тяжелый флажок не отображается в электронной почте, как в HTML

0 голосов
/ 23 января 2019

Первоначально я спросил об этом в этой теме и получил свой ответ для обычного HTML, однако следующий код НЕ показывает то же самое при отправке по электронной почте: 

<div style="color:white; text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black; font-size: 30px;">&#10004;</div>
<div style="color:yellow; text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black; font-size: 30px;">&#10004;</div>
<div style="color:green; text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black; font-size: 30px;">&#10004;</div>

Это потому, что это выглядит Microsoft видит это как эмодзи .

Я попробовал следующее в коде, но ничего не изменилось: 

<div class="unicode" style="color:white; text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black; font-size: 30px;">&#10004;</div>

Все, что я получаю, по умолчанию:

example image

Вот шаблон jinja2, который я сейчас использую / tweaking, чтобы заставить его работать (см. Раздел tbody): 

jinja_tmplt = """<!DOCTYPE html>
<html lang=\"en-US\">
{% for html_CI in html_CI_list %}
    {% set columns = html_CI.tech_DF.columns.values[1:] %}
    <h1>{{ html_CI.tech_grp }}</h1><br/>
    {{ html_CI.tech_DF.to_html(index=False) }}<br>
    <style>.table tbody tr:nth-child(even) {background-color: #ABC233;} .table tbody tr:nth-child(odd) {background-color: #6CC04A;}</style>
        <table border="1" class="dataframe table table-striped">
            <thead>
                <tr style="text-align: center;">
                {% for col_hdr in columns %}
                    <th style="background-color: #005C21; text-align: center; color:white">{{ col_hdr }}</th>
                {% endfor %}
                </tr>
            </thead>
            <tbody>
                {% for row in html_CI.tech_DF.itertuples() %}
                    <tr style="text-align: center;">
                    {% for elem_data in row[2:] %}
                        {% set loop_num = loop.index0 %}
                        {% if loop_num == 0 %}
                            <td>{{ elem_data }}</td>
                        {% else %}
                            <td><div style="color:white; text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black; font-size: 30px;">&#10004;</div></td>
                        {% endif %}
                    {% endfor %}
                    </tr>
                {% endfor %}
            </tbody>
        </table>
{% endfor %}
</html>"""

Обратите внимание, что раскраска таблицы в стиле также работает в HTML, но не в электронной почте.

Ответы [ 3 ]

0 голосов
/ 23 января 2019

:before не будет работать с Gmail, Outlook, Yahoo или заметками.

Следующие галочки работают хорошо в каждом крупном почтовом клиенте. Они могут быть изменены и окрашены. Их точный вид может отличаться из-за почтового клиента или шрифта, используемого для их отображения:

  • & # x2713; &#x2713; - галочка
  • & # x2714; &#x2714; - Тяжелая галочка

Образец окраски:

<span style="color: #ff0000;">&#x2713; - Check Mark: red </span>

<span style="color: #0000ff;">&#x2714; - Heavy Check Mark: blue</span>

Удачи.

0 голосов
/ 29 января 2019

Похоже, что единственный вариант - использовать ... Ничто из вышеперечисленного не подойдет для моих нужд.

Мне нужно было использовать следующий код, но ни один из других вариантов (div итакой) будет работать для электронной почты. 

&#10003;

Вот используемый Джинджа ... соедините их:

  1. Заголовок
  2. Стиль
  3. template
  4. нижний колонтитул

Вот код ... 

JINJA_HDR = """<!DOCTYPE html>
    <html lang=\"en-US\">"""

JINJA_FTR = """</html>"""


def get_style():
    """


    """

    html_style = """<style>
            table.greenCisco {
              border: 2px solid #005C21;
              background-color: #6CC04A;
              width: 100%;
              text-align: center;
              border-collapse: collapse;
            }
            tr:nth-child(even) {
                background: #ABC233;
            }
            tr:nth-child(odd) {
                background: #6CC04A;
            }
            table.greenCisco td, table.greenCisco th {
              border: 2px solid #000000;
              padding: 3px 2px;
            }
            table.greenCisco tbody td {
                color: #FFFFFF;
            }
            table.greenCisco thead {
              background: #005C21;
              border-bottom: 1px solid #444444;
            }
            table.greenCisco thead th {
              font-size: 15px;
              font-weight: bold;
              color: #FFFFFF;
              text-align: center;
              border-left: 2px solid #D0E4F5;
            }
            table.blueTable tfoot {
              font-size: 13px;
              font-weight: bold;
              color: #FFFFFF;
              background: #D0E4F5;
              text-align: center;
              border-top: 2px solid #444444;
            }
        </style>"""

    return html_style

def get_Jinja(df_list:list):
    """
    This function takes in a list of DataFrames and returns 
    a Jinja parsed string of table data used in email.

    """

    # skipping checking the input for now - kkeeton 20190122
    jinja_tmplt = """{% for html_CI in html_CI_list %}
        {% set columns = html_CI.tech_DF.columns.values[1:] %}
        <h1>{{ html_CI.tech_grp }}</h1><br/>
        <table class="greenCisco">
            <thead>
                <tr>
                {% for col_hdr in columns %}
                    <th>{{ col_hdr }}</th>
                {% endfor %}
                </tr>
            </thead>
            <tbody>
                {% for row in html_CI.tech_DF.itertuples() %}
                    {% set row_num = loop.index0 %}
                    {% if row_num % 2 == 0 %}
                        <tr bgcolor="#ABC233">
                    {% else %}
                        <tr bgcolor="#6CC04A">
                    {% endif %}
                    {% for elem_data in row[2:] %}
                        {% set loop_num = loop.index0 %}
                        {% if loop_num == 0 %}
                            <td>{{ elem_data }}</td>
                        {% else %}
                            {% if elem_data == 0 %}
                                <td><div style="color:white; text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black; font-size: 30px;">&#10003;</div></td>
                            {% elif elem_data == 1 %}
                                <td><div style="color:yellow; text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black; font-size: 30px;">&#10003;</div></td>
                            {% elif elem_data == 2 %}
                                <td><div style="color:green; text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black; font-size: 30px;">&#10003;</div></td>
                            {% endif %}
                        {% endif %}
                    {% endfor %}
                    </tr>
                {% endfor %}
            </tbody>
            <tfoot valign="center">
                <tr colspan="0"><span style="color:white; text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black; font-size: 30px;">&#10003;</span> <b>Pending</b> <span style="color:yellow; text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black; font-size: 30px;">&#10003;</span> <b>In Progress</b> <span style="color:green; text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black; font-size: 30px;">&#10003;</span> <b>Complete</b></tr>
            </tfoot>
        </table>
    {% endfor %}"""

    return jinja_tmplt
0 голосов
/ 23 января 2019

Псевдоэлементы

Вы пробовали: 

div::before {
  content:'\2714';
}

Попробуйте все галочки, возможно, есть некоторые, которые несчитается смайликов: 

\2611   &#9745;
\2705   &#9989;
\2713   &#10003;
\2714   &#10004;
\1f5f8  &#128504;
\1f5f9  &#128505;

Демо 

div::before {
  content:'\2714';
}
<div style="color:white; text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black; font-size: 30px;"></div>
<div style="color:yellow; text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black; font-size: 30px;"></div>
<div style="color:green; text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black; font-size: 30px;"></div>
...