2014-10-17 1 views
10

.someclass { text-transform: uppercase }someclass 클래스의 모든 텍스트를 대문자로 변환하지만 텍스트를 선택하고 복사하여 텍스트 편집기 나 전자 메일에 붙여 넣으면 문자가 그대로 유지됩니다. 원래의 경우. CSS 이외의 일부 클라이언트 측 웹 스타일링 기술로 인해 사용자가 텍스트를 복사 할 때 변환을 적용하지 않고 r에서 또는 f에서 과 같이 대소 문자 이외의 것을 변경하는 문서를 사용자 정의 텍스트 변환으로 정의 할 수 있습니까?변환되지 않은 텍스트를 복사하는 동안 한 페이지를 다른 페이지로 표시

대답에 대한 답변 : Replace a particular character using css 권장 JavaScript. 나는 몇 가지 이유 대신 스크립트의 일부 (비 CSS) 선언적 스타일링 기술을 사용하는 것을 선호 것 :

  1. 을 내가 원하는 복사 및 붙여 넣기 같은에서, 원본 텍스트가 아닌 변환 된 텍스트를 반환 방법은 text-transform 속성입니다.
  2. 사용자가 변환되지 않은 문자를 입력하면 "페이지 내에서 찾기"(Ctrl + F)를 누릅니다.
  3. 내 사이트의 시청자가 NoScript 또는 다른 스크립트 허용 사이트 플러그인에 대한 통계가 부족합니다. 그러나 나는 JavaScript를 실행하지 않기 때문에 사용자가 종종 특정 익스플로잇의 영향을받지 않는 것에 대해 자랑스러워하는 온라인 포럼을 정기적으로 방문한다는 사실에 왜곡되어있다.
  4. onload을 실행하는 스크립트는 눈에 띄지 않는 플래시 선이 다시 래핑됩니다.

는 최근에 나는 answer to a question about whitelisting characters에 근거하여 <body> 내에서 텍스트 노드를 변경하는 XSLT 스타일 시트를 쓸 수 있었다. (힌트 : match="html:body//text()"translate()) 너무 익숙해 지려고하는 브라우저에서는 복사 및 Ctrl + F 기준에 맞지 않으며 reportedly fails the no-FOUC criterion이지만 스크립트가 꺼져 있어도 IE 6 이후 거의 모든 주요 브라우저에서로드되어야합니다 . 그러나 1 년 전, Google은 kill client-side XSLT a year ago by removing it from Blink을 시도했습니다. 크롬, 오페라 및 기타 Chromium 기반 브라우저에서 XSLT를 삭제하면 XSLT를 사용하지 않는 사용자가 스크립트를 사용하지 않는 사용자보다 많습니다.

libre 글꼴을 획득하고 @font-face, font-feature-settingsfont-variant-ligatures이 유일한 방법을 실행할 수있는 사용자 지정 양식과 합자를 포함하도록 글꼴을 수정하고 있습니까?

+0

@ font-face를 사용하는 것이 가장 좋은 해결책 인 것 같습니다. 나는 문장을 1 문자'span's로 분해 한 다음': before','width','text-indent' 및'overflow'를 사용하여 문자를 숨기고 물음표를 표시하려고했습니다.그것은 메시지를 숨기는 데 효과적 이었지만 브라우저에 너무 의존적입니다 : Chrome & FF 복사 복사가 완벽하게 작동합니다 (FF는 강조 표시되지 않지만). IE는 텍스트를 복사하고 추악하게 만들기 전에 Chrome에서 검색을 허용합니다. 펑키 한 방법으로, FF가 문자열을 찾았지 만 강조 표시하지 않고, IE는 단 한 문자 만 찾습니다. 여기에서 예제를 찾을 수 있습니다. http://jsfiddle.net/1jprubt1/ –

+0

나는 해결책이 아니라는 것을 압니다. 나보다 CSS 지식이 많은 사람을위한 출발점 : $ –

+2

CSS로 이것을 수행하는 좋은 방법은 없습니다. –

답변

3

CSS - 캐스케이드 스타일 시트는 이름에서 알 수 있듯이 시트 (html 페이지)를 양식화하는 데에만 사용됩니다. 스 니펫 .someclass { text-transform: uppercase }someclass 클래스의 태그 안에 문자 (알파벳)를 양식화하는 것입니다. 그것의 쉽지 않거나 JavaScript를 사용하지 않고 CSS만을 사용하여 당신의 필요를 성취 할 수 없다고 말할 수 있습니까?

Zach Saucier 님의 질문에 대한 답변에 "CSS로 할 수있는 좋은 방법이 없습니다"라고 나도 동의합니다.

JavaScript를 사용하여 완전히 가능합니다. 그러나 당신의 기준은 그렇게하기를 원하지 않습니다.

JavaScript를 사용하거나 CSS를 사용하지 마십시오.

관련 문제