CSS에서만 위첨자?
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%; }
또는 수직 정렬을 사용하거나 다른 방법으로 확신합니다. 문제는 복잡해지기 시작한다는 것입니다.
- 줄 높이에 CSS 위첨자 간격 ;
- 첨자 / Subcript에 대한 CSS를 조심 에 왜 틀림없이해야하지 스타일 첨자 / 아래 첨자 CSS와 전혀 ;
두 번째 요점은 강조 할 가치가 있습니다. 일반적으로 위첨자 / 아래 첨자는 실제로 스타일 문제가 아니라 의미를 나타냅니다.
참고 : 이 질문과 관련이 없더라도 일반적인 수학적 첨자 및 아래 첨자 표현에 대한이 엔티티 목록을 언급 하는 것이 좋습니다.
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으로 인해 브라우저가 쿼크 모드 (또는 표준 모드가 아님)에있을 때이 솔루션이 제대로 작동하는지 알 수 없습니다.
글꼴 크기를 변경하는 경우 다음 규칙에 따라 크기 축소를 중지 할 수 있습니다.
sup sub, sub sup, sup sup, sub sub{font-size:1em !important;}
이것이 관련되어 있는지 확실하지 않지만 ²태그 내에 다른 html 태그를 추가 할 수 없으므로 HTML 엔티티 관련 문제를 해결했습니다 <label>. 따라서 아이디어는 CSS 또는 HTML 태그 대신 ASCII 코드를 사용하는 것이 었습니다.
CSS 속성 font-variant-position이 고려 중이며 결국이 질문에 대한 답이 될 수 있습니다. 2017 년 초 현재 Firefox 만 지원합니다.
.super {
font-variant-position: super;
}
MDN을 참조하십시오 .
"수직 정렬 : 텍스트 상단"을 원하는 경우
.superscript {
position: relative;
top: 5px;
font-size: 90%;
vertical-align: super;
}
sup가 사용하는 정확한 방법은 다음과 같습니다.
.superscript{
vertical-align:super;
font-size:smaller;
}
구글 크롬 검사 요소를 통해 이것을 발견했습니다.
관련이 있거나 관련이없는 경우, 위첨자를 HTML 요소 또는 텍스트에서 span + css로 사용하면 현지화 프로그램에서 현지화에 문제가 발생할 수 있습니다.
예를 들어,의는 "3 가정 해 봅시다 번째의 자 소프트웨어"
3<sup>rd</sup> party software
3<span class="superscript">rd</span> party software
번역가는 "rd"를 어떻게 번역 할 수 있습니까? 몇 가지 키릴 언어의 경우 비워 둘 수 있지만 다른 이국적인 언어 또는 RTL 언어는 어떻습니까?
이 경우 위 첨자를 사용하지 말고 "타사 소프트웨어"와 같은 완전한 문구를 사용하는 것이 좋습니다. 또는 다른 의견에서 언급했듯이 jQuery를 통해 위첨자에 더하기 기호를 추가합니다.
참고 URL : https://stackoverflow.com/questions/501671/superscript-in-css-only
'development' 카테고리의 다른 글
| ViewPager를 동적으로 업데이트 하시겠습니까? (0) | 2020.03.15 |
|---|---|
| 힘내-현재 분기 바로 가기를 밀어 (0) | 2020.03.15 |
| NSLog에서 부울 플래그를 인쇄하는 방법? (0) | 2020.03.15 |
| 리포지토리 액세스가 거부되었습니다. (0) | 2020.03.15 |
| std :: string을 char *로 (0) | 2020.03.15 |