CSS에서만 위첨자?

320

CSS에서만 위첨자를 어떻게 만들 수 있습니까?

외부 링크를 위 첨자로 표시하는 스타일 시트가 있지만 문자를 올바르게 정렬하는 데 어려움을 겪고 있습니다.

내가 현재 가지고있는 것은 다음과 같습니다.

a.external:after {
  font-size: 50%;
  vertical-align: top;
  content: "+";
}

그러나 작동하지 않습니다.

당연히 HTML을 허용하는 <sup>경우에만 -tag를 사용합니다 content...

css

— 헨릭 폴
소스

1

불일치가있는 것 같습니다 : 수직 정렬 상단이지만 <sub>? 아마도 <sup>을 의미합니까?

— cletus

IE9에서는 "vertical-align : text-top"이 작동하지 않습니다. 그러나 FireFox 4.0에서는 그랬습니다. 적어도 Wordpress 컨텍스트 내에서.

— JosefB

1

contentHTML 이 허용 되면 우려가 분리 될 수 있습니다.

— Eva

489

을 사용하여 위첨자를 할 수 있습니다 vertical-align: super(및 함께 font-size축소).

그러나 유용한 정보를 보려면 여기 에서 다른 답변 , 특히 paulmurray 및 cletus의 답변 을 읽으십시오 .

— 피터 보튼
소스

29

또한 font-size실제 위 첨자 효과를 주려면을 줄여야합니다.

— Nirmal

5

아래의 @paulmurray의 대답은보다 정확하고 포괄적입니다. IMHO, 그것은 정답입니다.

— Doug Paul

3

"아래에"라고 말하는 것은 답변을 주문하는 세 가지 방법이있을 때 도움이되지 않습니다. 당신이 바로, 그래도하고 바울의 대답 이다 더 나은 하나, 그것은이 많은 투표 등을 통해 다섯 번이 미친 짓이야.

— 피터 Boughton

188

솔직히 CSS에서만 위 첨자 / 아래 첨자를 수행하는 요점이 보이지 않습니다. 편리한 CSS 속성은 없으며 다음과 같은 자체 구현이 있습니다.

.superscript { position: relative; top: -0.5em; font-size: 80%; }

또는 수직 정렬을 사용하거나 다른 방법으로 확신합니다. 문제는 복잡해지기 시작한다는 것입니다.

줄 높이에 CSS 위첨자 간격 ;
첨자 / Subcript에 대한 CSS를 조심 에 왜 틀림없이해야하지 스타일 첨자 / 아래 첨자 CSS와 전혀 ;

두 번째 요점은 강조 할 가치가 있습니다. 일반적으로 위첨자 / 아래 첨자는 실제로 스타일 문제가 아니라 의미를 나타냅니다.

참고 : 이 질문과 관련이없는 경우에도 일반적인 수학 위첨자 및 아래 첨자 표현식에 대한이 엔티티 목록을 언급 하는 것이 좋습니다.

sub / sup 태그는 HTML과 XHTML로되어 있습니다. 나는 단지 그것들을 사용할 것입니다.

나머지 CSS는 : after 의사 요소 및 내용 속성이 널리 지원되지 않습니다. HTML에 이것을 수동으로 넣고 싶지 않다면 Javascript 기반 솔루션이 다음으로 가장 좋은 방법이라고 생각합니다. jQuery를 사용하면 다음과 같이 간단합니다.

$(function() {
  $("a.external").append("<sup>+</sup>");
};

— 클레 투스
소스

11

"광범위하게 지원되지 않음"이란 "IE에서는 지원되지 않음"을 의미합니다.

— Boldewyn

2

quirksmode.org/css/contents.html IE7 이하 또는 호환 모드의 IE8에서는 지원되지 않습니다.

— cletus

4

... 내가 말한 것과 정확히 일치합니다.

— Boldewyn

SUP 태그를 사용하여 A 태그를 간단하게 래핑하려면 다음을 사용하십시오. $ ( "a.external"). wrap ( "<sup />");

— Russell

2

처음에는 @PeterBoughton이 승인 한 솔루션을 사용했는데, 선 높이를 왜곡하지 않기 때문에이 솔루션을 선택했습니다.

— Nuri Hodges

129

CSS 문서에는 모든 HTML 구문에 해당하는 업계 표준 CSS가 포함되어 있습니다. 즉 : 대부분의 웹 브라우저는 요즘 명시 적으로 처리하지 않는 SUB, SUP, B, I등 - 그들은 (좀 그렇다고)로 변환 SPAN적절한 CSS 속성을 가진 요소 및 렌더링 엔진은 해당 다룬다.

이 페이지는 부록 D입니다. HTML 4 용 기본 스타일 시트

원하는 비트는 다음과 같습니다.

small, sub, sup { font-size: .83em }
sub             { vertical-align: sub }
sup             { vertical-align: super }

— 폴 머레이
소스

13

이것은 작동하지만 나사가 조 line-height입니다. IMHO가 망치지 않는 유일한 방법 line-height은 position:relativecletus가 제안한대로 사용 하는 것 입니다 . stackoverflow.com/a/501689/260080

— Marco Demaio

27

나는 아래의 관찰을 통해 줄의 위쪽과 아래쪽 여백을 변경하지 않는 위 첨자 요소를 사용하여 명확하게 읽을 수있는 텍스트를 만들기 위해 페이지를 작업하고있었습니다.

line-height: 1.5em예를 들어 주 텍스트의 경우 위 첨자 텍스트의 줄 높이를 줄여서 올바르게 표시해야합니다. 나는 사용했다 line-height: 0.5em.

또한 vertical-align: super대부분의 브라우저에서 잘 작동하지만 위첨자 요소가 있으면 IE8에서 나머지 줄이 아래로 밀립니다. 그래서 대신 vertical-align: baseline부정적인 top것과 함께 사용 position: relative하여 동일한 효과를 얻었습니다. 이는 브라우저에서 더 잘 작동하는 것 같습니다.

따라서 "자체 구현"에 추가하려면 다음을 수행하십시오.

.superscript {
    font-size: .83em;
    line-height: 0.5em;
    vertical-align: baseline;
    position: relative;
    top: -0.4em;
}

— 레산 바에 지
소스

이것은 div 컨테이너에 배치 될 때 잘

— Alex G

13

http://htmldog.com/articles/superscript/ 본질적으로 :

position: relative;
bottom: 0.5em;
font-size: 0.8em;

내가 알 수있는 한 실제로 잘 작동합니다.

— 닉 프레 스타
소스

10

다음은 Mozilla Firefox의 내부 html.css에서 가져온 것입니다.

sup {
  vertical-align: super;
  font-size: smaller;
  line-height: normal;
}

따라서 귀하의 경우 다음과 같습니다.

.superscript {
  vertical-align: super;
  font-size: smaller;
  line-height: normal;
}

— 크리스천 스타 들러
소스

5

이것은 또 다른 깨끗한 솔루션입니다.

sub, sup {vertical-align: baseline; position: relative; font-size: 70%;} /* 70% size of its parent element font-size which is good. */
sub {bottom: -0.6em;} /* use em becasue they adapt to parent font-size */
sup {top: -0.6em;} /* use em becasue they adapt to parent font-size */

이런 식으로 sup / sub 태그를 계속 사용할 수는 있지만 항상 단락 행 높이 를 고정하도록 교묘 한 동작을 수정했습니다. .

이제 할 수 있습니다 :

  <p>This is a line of text.</p>
  <p>This is a line of text, <sub>with sub text.</sub></p>
  <p>This is a line of text, <sup>with sup text.</sup></p>
  <p>This is a line of text.</p>

단락 선 높이가 망가져서는 안됩니다.

IE7, IE8, FF3.6, SAFARI4, CHROME5, OPERA9에서 테스트

나는 p {line-height: 1.3;}(당신이 줄을 너무 가깝게 붙이지 않는 한 좋은 줄 높이입니다)를 사용하여 테스트 했지만 여전히 작동합니다. "-0.6em"은 그 줄 높이와 함께 하위 / 서브 텍스트에 맞는 작은 양입니다. 서로 넘어 가지 마십시오.

관련이있을 수있는 세부 사항을 잊어 버렸습니다. 항상 페이지 의 첫 번째 줄에 DOCTYPE을 사용합니다 (특히 HTML 4.01 사용 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">). 따라서 DOCTYPE이 없거나 표준 / 거의 표준 모드를 트리거하지 않는 DOCTYPE으로 인해 브라우저가 쿼크 모드 (또는 표준 모드가 아님)에있을 때이 솔루션이 제대로 작동하는지 알 수 없습니다.

— 마르코 데마 이오
소스

4

글꼴 크기를 변경하는 경우 다음 규칙에 따라 크기 축소를 중지 할 수 있습니다.

sup sub, sub sup, sup sup, sub sub{font-size:1em !important;}

— freexe
소스

1

이것이 관련되어 있는지 확실하지 않지만 ²태그 내에 다른 html 태그를 추가 할 수 없으므로 HTML 엔티티 관련 문제를 해결했습니다 <label>. 따라서 아이디어는 CSS 또는 HTML 태그 대신 ASCII 코드를 사용하는 것이 었습니다.

— Archrade
소스

0

체크 아웃 : http://www.cssdesignpatterns.com/Chapter%2012%20-%20ALIGNING%20CONTENT/Vertical-aligned%20Content/example.html

"수직 정렬 : 텍스트 상단"을 원하는 경우

— 프랭크 슈 비터 만
소스

0

CSS 속성 font-variant-position이 고려 중이며 결국이 질문에 대한 답이 될 수 있습니다. 2017 년 초 현재 Firefox 만 지원합니다.

.super {
    font-variant-position: super;
}

MDN을 참조하십시오 .

— 해시 변경
소스

2020 년 봄이며 Firefox 이외의 브라우저에서는 여전히 지원되지 않습니다. 아 ..

— Jens

0

관련이 있거나 관련이없는 경우, 위첨자를 HTML 요소 또는 텍스트에서 span + css로 사용하면 현지화 프로그램에서 현지화에 문제가 발생할 수 있습니다.

예를 들어,의는 "3 가정 해 봅시다 ^번째의 자 소프트웨어"

3<sup>rd</sup> party software
3<span class="superscript">rd</span> party software

번역가는 "rd"를 어떻게 번역 할 수 있습니까? 그들은 여러 키릴 언어의 경우 비워 둘 수 있지만 다른 이국적인 언어 또는 RTL 언어는 어떻습니까?

이 경우 위 첨자를 사용하지 말고 "타사 소프트웨어"와 같은 완전한 문구를 사용하는 것이 좋습니다. 또는 다른 의견에서 언급했듯이 jQuery를 통해 위첨자에 더하기 기호를 추가합니다.

— 누비아 흑인
소스

-1

.superscript {
  position: relative;
  top: 5px;
  font-size: 90%;
  vertical-align: super;
}

— 라즈 반 체 셀라 루
소스

-1

sup가 사용하는 정확한 방법은 다음과 같습니다.

.superscript{
    vertical-align:super;
    font-size:smaller;
}

구글 크롬 검사 요소를 통해 이것을 발견했습니다.

— 하이 피플
소스