CSS верхний индекс регистрации товарного знака - PullRequest
Новая
       18

CSS верхний индекс регистрации товарного знака

23 голосов
/ 10 ноября 2009

Я бы хотел, чтобы все "®" на сайте были в верхнем индексе Могу ли я сделать это с помощью CSS?

Ответы [ 11 ]

24 голосов
/ 10 ноября 2009

Ответ AverageAdam будет работать нормально, но если по какой-то причине вам нужна версия CSS, вы можете сделать это: 

.sup { vertical-align: super; }

и 

<span class="sup">&reg;</span>

С здесь .

7 голосов
/ 25 ноября 2013

добавить это в ваш HTML-файл <sup>your mark here</sup>

затем добавьте это к вашему CSS 

sup {
    position: relative;
    font-size: 40%;
    line-height: 0;
    vertical-align: baseline;
    top: -1.2em;
}

Вы можете отрегулировать высоту метки, используя "top" в css, а размер - "font-size". Это также будет работать для любого TM, SM или символа, который вы хотите. Это не повлияет на интервалы или типографику.

7 голосов
/ 10 ноября 2009 
<sup>&reg;</sup>

К сожалению, в CSS нет способа указать верхний индекс. Однако вы можете смоделировать его, используя диапазон и некоторые теги.

http://www.webmasterworld.com/forum83/1031.htm

6 голосов
/ 10 ноября 2009

Я знаю, что вы спрашивали CSS, но этот код jQuery работал для меня, надеюсь, он вам поможет 

<html>
    <head>
        <script type="text/javascript"
            src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js">
        </script>
        <script type="text/javascript">
            $(document).ready(function() {
                $("body").html(
                    $("body").html().replace("®", "<sup>&reg;</sup>")
                ); 
            });
        </script>
    </head>
    <body>
        Some text here &reg;
    </body>
</html>
5 голосов
/ 07 февраля 2013

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

sup{
 vertical-align: 75%;
 line-height: 5px;
 font-size:11px;
}
2 голосов
/ 26 февраля 2013

Ответ Виктора сработал только для первой отметки Reg на моей странице. Я нашел этот код для работы на всей странице. Надеюсь, это кому-нибудь поможет: 

$("body").html(
   $("body").html().replace(/&reg;/gi, '<sup>&reg;</sup>').replace(/®/gi, '<sup>&reg;</sup>')
);

нашел его здесь: http://www.cmexsolutions.com/blog/use-jquery-to-superscript-all-register-marks-reg-or-%C2%AE

1 голос
/ 29 сентября 2014

, если вы не возражаете против использования jQuery: 

$("p,h1,h2,h3,h4").each(function(){
    $(this).html($(this).html().replace(/&reg;/gi, '<sup>&reg;</sup>').replace(/®/gi, '<sup>&reg;</sup>'));
});

он работает намного быстрее, чем модифицирует весь тег body (как в Роберта и ответов Виктора)

1 голос
/ 05 июля 2013

Единственная проблема с некоторыми из приведенных выше сценариев заключается в том, что они не связаны с тем фактом, что на странице уже могут быть некоторые элементы & reg; . В этом случае они будут заменены на: & reg; .

Я думаю, что подобное решение может иметь больше смысла. 

$("body").html(
   $("body").html().replace(/<sup>&reg;<\/sup>/gi, '&reg;').
        replace(/&reg;/gi, '<sup>&reg;</sup>').
        replace(/®/gi, '<sup>&reg;</sup>')
);
1 голос
/ 10 ноября 2009

В дополнение к предыдущим ответам, я бы предположил, что верхний индекс является скорее презентационным, чем семантическим, и поэтому оформление регистрационного знака должно выполняться с использованием CSS. Независимо от того, является ли индекс надписью или нет, регистрационный знак все еще является регистрационным знаком и будет признан регистрационным знаком людьми / компьютерами. Сам символ может считаться семантическим, поскольку он придает «особый» смысл объекту, к которому он относится, но его стилизация полностью наглядна. По соглашению регистрационный знак часто (но не всегда) имеет верхний индекс, как и символ товарного знака.

0 голосов
/ 31 июля 2018

Я использовал приведенный ниже CSS для позиционирования символа регистрации товарного знака ® в HTML, в результате чего получается символ ® со ссылкой, меньшего размера и над обычным текстом. Обратите внимание, что в примере есть две ссылки. Причина этого в том, что я хотел, чтобы основная якорная ссылка была подчеркнута, а символ ® не был подчеркнут. 

.trademark {
  position: relative;
  font-size: 40%;
  top: -1.2em;
}

.no-style {
 text-decoration: none !important;
}

Пример с использованием CSS JSX в React: 

 <a href="https://www.photoprintsnow.com">Photo Prints Now</a><a 
 href="https://www.photoprintsnow.com" className="no-style"><span 
 className="trademark">®</span></a>

Пример в HTML с CSS, где синтаксис является class вместо className: 

 <a href="https://www.photoprintsnow.com">Photo Prints Now</a><a 
 href="https://www.photoprintsnow.com" class="no-style"><span class="trademark">®</span> 
 </a>

Пример в HTML со STYLE: 

 <a href="https://www.photoprintsnow.com">Photo Prints Now</a>
 <a href="https://www.photoprintsnow.com" style="text-decoration: none; "> 
 <span style="position: relative;font-size: 40% ;top: -1.2em;">®</span>
 </a>
Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...