[css] CSS에서만 위첨자?

Program / 글쓴이

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

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

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

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

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

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

답변

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

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

답변

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

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

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

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

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

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

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

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

답변

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 }

답변

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

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;
}

답변

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

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

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

답변

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

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

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

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

답변

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

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으로 인해 브라우저가 쿼크 모드 (또는 표준 모드가 아님)에있을 때이 솔루션이 제대로 작동하는지 알 수 없습니다.