programing

CSS로만 된 대문자?

powerit 2023. 7. 27. 22:25
반응형

CSS로만 된 대문자?

어떻게 하면 CSS로만 슈퍼스크립트를 완성할 수 있습니까?

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

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

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

하지만 효과가 없습니다.

당연히, 저는 그것을 사용할 것입니다.<sup> - 에만, -tag, -tagcontentHTML을 사용할 수 있습니다...

를 사용하여 (및 이에 수반되는 감소) 상위 스크립트를 수행할 수 있습니다.

그러나 유용한 정보를 위해 여기에 있는 다른 답변, 특히 폴머레이와 클레투스의 답변을 반드시 읽으십시오.

솔직히 나는 CSS로만 수퍼스크립트/서브스크립트를 하는 것이 무슨 의미가 있다고 생각하지 않습니다.편리한 CSS 속성은 없으며, 다음을 포함한 자체 개발된 여러 구현만 있습니다.

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

수직 정렬을 사용하거나 다른 방법을 사용할 수 있습니다.문제는 복잡해지기 시작한다는 것입니다.

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

참고 사항:이 질문은 그것과 관련이 없지만 일반적인 수학적 초첨자 및 첨자 표현식에 대한 엔티티 목록을 언급할 가치가 있습니다.

하위/sup 태그는 HTML과 XHTML로 되어 있습니다. 저는 그냥 그것들을 사용할 것입니다.

나머지 CSS의 경우 :after 유사 요소 및 내용 속성은 널리 지원되지 않습니다.이것을 HTML에 수동으로 넣고 싶지 않다면 자바스크립트 기반 솔루션이 최선의 방법이라고 생각합니다.jQuery를 사용하면 다음과 같이 간단합니다.

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

CSS 문서에는 모든 HTML 구조에 대한 업계 표준 CSS 등가물이 포함되어 있습니다.즉, 요즘 대부분의 웹 브라우저는 명시적으로 처리하지 않습니다.SUB,SUP,B,I- - 그즉(", sorta")로 됩니다.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 */

이러한 방식으로 보조/하위 태그를 계속 사용할 수 있지만 항상 문단 선 높이를 고정하기 위해 해당 태그의 동작을 수정했습니다.

이제 다음을 수행할 수 있습니다.

  <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"은 너무 작아서 해당 라인 높이에서도 하위/하위 텍스트가 서로 맞지 않고 서로 겹치지 않기 때문에 여전히 작동합니다.

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

글꼴 크기를 변경하는 경우 다음 규칙을 사용하여 크기 축소를 중지할 수 있습니다.

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

속성 CSS »font-variant-position고려 중에 있으며 결국 이 질문에 대한 답이 될 수 있습니다.초 

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

MDN 참조.

해라

.aftersup {
 font-size: 1em;
 margin: left;
 vertical-align: .7em;
}

또는 일반적인 "이후"

.after {
 font-size: 1em;
 margin: left;
 vertical-align: .7em;
}

".a.external:after"는 단순화될 수 있습니다.

또는

.after {
 font-size: 50%;
 margin: left;
 vertical-align: .7em;
}

"전체 크기의 50%" 사용 - 어떤 크기의 50%?일부 태그 내에서 사용하지 않을 경우 상위 스크립트 이전의 텍스트 크기를 정의할 수 있습니다.

"font-size: 1em;"을 사용하는 경우, 링크 텍스트가 100%로 설정되고 상위 스크립트가 해당 100%의 50%인 경우를 제외하고, 링크 텍스트 크기를 정의하는 태그를 참조하지 않고 글꼴 크기가 확실히 설정됩니다.

실제로 "font-size: 1em;"을 사용하면 글꼴 크기 기준선이 설정됩니다.

연결 텍스트보다 작은 상위 스크립트 글꼴을 원하는 경우 "수직 정렬" 크기를 더 작게 설정합니다.

상위 스크립트 글꼴을 연결 텍스트와 동일한 크기로 설정하려면 "수직 정렬" 크기를 글꼴 크기와 동일하게 설정합니다.

링크 텍스트와 정렬하려면 "마진"을 링크 텍스트(왼쪽, 가운데, 오른쪽, 정당화됨)와 동일하게 설정해야 합니다.

.text {
  font-size: 1em;
  margin: left;
}
.aftersup {
  font-size: 1em;
  margin: left;
  vertical-align: .7em;
}

아래 예시와 같은 링크여야 합니다.

<p class="text"><a href="url">https://stackoverflow.com/questions/501671/superscript-in-css-only</a><aftersup>+</aftersup></p>

또는

<p class="text"><a href="url">https://stackoverflow.com/questions/501671/superscript-in-css-only</a><aftersup>You got this</aftersup></p>

또는

<a href="url">https://stackoverflow.com/questions/501671/superscript-in-css-only</a><aftersup>+</aftersup>

또는

<a href="url">https://stackoverflow.com/questions/501671/superscript-in-css-only<aftersup>You got this</aftersup>

예를 들면...

CSS로만 된 상위 스크립트?+

또는

CSS로만 된 대문자?당신은 이것.

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

만약 당신이 "text-align:text-top"을 원하는 것처럼 보인다면.

이것이 관련된 것인지는 잘 모르겠지만, 저는 제 문제를 해결했습니다.&sup2;HTML 엔티티는 내가 다른 HTML 태그를 추가할 수 없었기 때문입니다.<label>태그. 그래서 아이디어는 css나 HTML 태그 대신 ASCII 코드를 사용하는 것이었습니다.

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

정확한 사용 방법은 다음과 같습니다.

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

Google Chrome 검사 요소를 통해 이 정보를 찾았습니다.

관련이 있거나 관련이 없을 수도 있습니다. HTML 요소 또는 텍스트의 범위+css로 상위 스크립트를 사용하면 현지화 프로그램에서 현지화 문제가 발생할 수 있습니다.

예를 들어 "3자rd 소프트웨어"라고 가정해 보겠습니다.

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

반응형

'programing' 카테고리의 다른 글

div 요소에서 키 누름(또는 키다운) 이벤트를 캡처하려면 어떻게 해야 합니까?  (0) 2023.07.27
파이썬 함수(또는 코드를 직렬화)를 쉽게 피킹할 수 있는 방법이 있습니까?  (0) 2023.07.27
한 페이지에서만 AJAX POST에서 NTLM 챌린지 받기  (0) 2023.07.27
jQuery를 사용하여 브라우저 주소 표시줄 URL 변경  (0) 2023.07.27
Spring 시제품 스코프는 언제 사용해야 합니까?  (0) 2023.07.27

'programing'의 다른글

  • 현재글CSS로만 된 대문자?

관련글

댓글

티스토리툴바