텍스트 입력을 회전시키는 방법이 있습니까?

StackOverflow https://stackoverflow.com/questions/432589

문제

다음과 같이 텍스트 상자와 일부 텍스트를 약 30 도로 정렬해야합니다.rotated text

적어도 IE와 FF에서 일하고 싶습니다. 내가 그물에서 찾은 모든 것은 이미지 회전을 다룹니다.
누구나?

도움이 되었습니까?

해결책

좋은 크로스 브라우저 솔루션은 없습니다.

최신 WebKit은 CSS 변환을 지원하여 그러한 것을 간단하게 허용합니다.

거기 있습니다 <foreignContent> 이론적으로 HTML을 회전시킬 수있는 SVG에서는 널리 지원되지는 않습니다 (지원되는 곳은 일반적으로 불완전하고 버그가됩니다).

페이지 디자인을 변경하는 것이 좋습니다. 입력 주위에 테두리와 그림자가있는 시각적 트릭을 사용하여 약간 회전하는 것처럼 보입니다.

JavaScript 또는 Flash의 해킹에 대해 조언합니다. 브라우저의 입력 요소는 유용성에 중요합니다. 암호 관리자/자동 제, 다양한 표준 키보드 바로 가기, 텍스트 선택 등에 해킹이 잘 작동하지 않을 수 있습니다.

다른 팁

최선의 방법은 아마도 플래시 일 것입니다.

현재 브라우저에서 완전히 지원되지는 않지만 FF3 및 IE7에서 합리적으로 (적어도) 작동합니다. 캔버스 HTML 요소. 캔버스 요소는 HTML5의 일부이며 비트 맵 이미지의 동적 스크립트 렌더링을 허용합니다. 캔버스는 높이와 너비 속성을 가진 HTML 코드로 정의 된 소개 가능한 영역으로 구성됩니다. JavaScript 코드는 다른 공통 2D API와 유사한 전체 드로잉 기능 세트를 통해 영역에 액세스 할 수 있으므로 동적으로 생성 된 그래픽이 가능합니다.

페이지의 페이지 모질라 매뉴얼 캔버스에 텍스트를 그리는 방법을 보여줍니다. 모든 캔버스 그래픽에 가질 수 있습니다 rotate(angle) 적용된. 이 예제는 회전 방법을 사용하여 원형 패턴으로 모양을 그립니다. :

function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
ctx.translate(75,75);

for (i=1;i<6;i++){ // Loop through rings (from inside to out)
    ctx.save();
    ctx.fillStyle = 'rgb('+(51*i)+','+(255-51*i)+',255)';

    for (j=0;j<i*6;j++){ // draw individual dots
      ctx.rotate(Math.PI*2/(i*6));
      ctx.beginPath();
      ctx.arc(0,i*12.5,5,0,Math.PI*2,true);
      ctx.fill();
    }

    ctx.restore();
  }
}

페자에 동의합니다. 나는 이것을 위해 플래시를 사용한다. 그러나 사파리에서는 CSS3 변환을 사용하여이를 달성 할 수 있습니다.

헤드 맨 위에서, 나는 이것이 아직 사용하기에 충분히 널리 지원되지 않는 CSS3에서만 할 수있는 일이라고 생각합니다 (특정 브라우저가 필요하다고 말할 수있는 내부 앱이 아니라면).

CSS3을 시도하십시오

-webkit-transform: rotate(270deg);
-moz-transform:rotate(270deg);
-o-transform: rotate(270deg);

그러나 이것은 IE에서 작동하지 않을 것입니다

IE 9+의 경우 (Michael Potter에게 감사합니다)

-ms-transform: rotate(270deg)
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top