[]
DEMOS DOC DESIGNER API
DOWNLOAD
(Showing Draft Content)

셀의 텍스트 회전

SpreadJS는 사용자가 셀 안의 텍스트를 회전시킬 수 있도록 지원합니다. 이 기능은 셀에 표시되는 데이터의 형태를 변경하는 데 유용합니다.

사용자는 폰트 각도를 -90도에서 +90도까지(예: 45⁰, 90⁰, -45⁰, -90⁰ 등) 회전할 수 있으며, 스프레드시트 작업 중 사용자 지정에 따라 데이터 정렬도 변경할 수 있습니다. 텍스트는 아래에 공유된 스크린샷처럼 위쪽, 아래쪽, 시계 방향 또는 반시계 방향으로 회전할 수 있습니다:


사용 시나리오

텍스트 회전 기능은 다음과 같은 경우에 특히 유용합니다:

  • 사용자가 수백 개의 열이 있는 큰 스프레드시트에서 작업하고 있으며, 열 머리글의 텍스트가 셀의 텍스트보다 더 긴 경우 :

    이 경우, 열 머리글의 텍스트를 회전시켜 열 너비를 줄이면 더 많은 열 머리글을 한 번에 화면에서 확인하며 데이터를 분석할 수 있습니다.

  • 더 작은 공간에 더 많은 열 데이터를 배치하여 대량 데이터를 보다 쉽게, 빠르게 관리하고자 하는 경우

셀에서 텍스트 회전하기

회전할 텍스트가 일반 텍스트이거나 회계 형식의 텍스트인 경우, 채워지는 문자의 수는 셀 높이와 관련이 있습니다. 사용자가 셀 높이를 조정하면 텍스트는 동적으로 변경됩니다.

아래 이미지는 텍스트 회전 기능, 테두리 스타일, 사용자 지정 배경색이 적용된 스프레드시트의 기업별 연간 매출을 보여줍니다.



셀의 텍스트가 회전되면 다음과 같은 워크시트 기능에 영향을 줍니다:

  1. 텍스트 정렬 (Text Alignment) – 회전 각도는 텍스트의 정렬 순서에 영향을 줍니다. 회전 각도가 음수일 경우 텍스트는 오른쪽에서 왼쪽으로 표시되며, 양수일 경우 왼쪽에서 오른쪽으로 표시됩니다.

  2. 자동 줄바꿈 (Word Wrap) – 현재 셀의 높이만 자동 줄바꿈 기능에 영향을 미칩니다.

  3. 셀 오버플로우 (Cell Overflow) – 수평 정렬과 관련이 있습니다. hAlign=left일 경우 텍스트는 오른쪽으로, hAlign=right일 경우 텍스트는 왼쪽으로 오버됩니다.

  4. 텍스트 들여쓰기 (Text Indentation) – 셀의 텍스트에 들여쓰기가 설정되어 있으면 텍스트 회전 기능은 동작하지 않습니다.

  5. 셀 맞춤 (Shrink to Fit) – 회계 형식 텍스트의 경우 반복 문자가 제거되어 셀 안에 맞춰 텍스트가 축소됩니다.

  6. 텍스트 장식 (Text Decoration) – 텍스트가 회전되면 자리표시자에도 텍스트 장식이 Excel과 동일하게 적용됩니다.

  7. 텍스트 숨김 및 자동 높이 조정 (Text Hidden and AutoFit) – 회전 후의 높이가 현재 셀의 높이를 초과하는 경우, 셀 안에서 보이는 텍스트 외의 나머지 텍스트는 숨겨지며, rowHeightAutoFit은 회전 후의 세로 길이에 따라 계산됩니다. 회계 형식 텍스트의 경우 반복 문자가 제거되므로 텍스트가 셀 안에 자동으로 맞춰집니다.

배경과 함께 셀 테두리 회전

사용자가 스프레드시트의 셀(데이터 포함)에 텍스트 회전을 적용하면, 테두리와 배경색도 해당 각도로 회전됩니다. 텍스트 위치는 회전 후 셀 위치에 맞춰 자동으로 조정되며 아래 이미지처럼 표시됩니다:


참고: 사용자가 배경색을 설정하는 경우, 셀이 값을 포함하고 임의의 테두리를 가질 때에만 배경 회전이 효과를 가집니다. 이는 배경이 회전된 테두리 영역을 채울 수 있도록 하기 위함입니다.

다음 코드 샘플은 스프레드시트 작업 중 셀의 텍스트를 회전하는 방법을 보여줍니다.

Ask ChatGPT

// Spread 초기화
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });

// 활성화 시트 가져오기
var activeSheet = spread.getActiveSheet();
// 데이터 준비
activeSheet.setValue(1, 1, "Company Sales Data");
activeSheet.setValue(1, 3, "Year-2015");
activeSheet.setValue(1, 4, "Year-2016");
activeSheet.setValue(1, 5, "Year-2017");
activeSheet.setValue(1, 6, "Year-2018");
activeSheet.setValue(1, 7, "Year-2019");
activeSheet.setValue(2, 2, "Gradlco");
activeSheet.setValue(3, 2, "Saagiate");
activeSheet.setValue(4, 2, "Inferno");
activeSheet.setColumnWidth(1, 120);

for (var r = 2; r <= 4; r++) {
   for (var c = 3; c < 8; c++) {
      activeSheet.setValue(r, c, parseInt(Math.random() * 5000));
   }
}

// textOrientation 속성이 포함된 스타일을 생성하고 셀 범위에 적용
var style = new GC.Spread.Sheets.Style();
style.textOrientation = 60;
style.backColor = "pink";
style.foreColor = "red";
for (var i = 3; i < 8; i++)
   activeSheet.setStyle(1, i, style, GC.Spread.Sheets.SheetArea.viewport);

// 행 높이 설정
activeSheet.setRowHeight(1, 60, GC.Spread.Sheets.SheetArea.viewport);
activeSheet.addSpan(1, 1, 4, 1, GC.Spread.Sheets.SheetArea.viewport);

// 테두리가 없는 셀(1,1)에 textOrientation을 설정
activeSheet.getCell(1, 1).textOrientation(60);
activeSheet.getCell(1, 1).hAlign(GC.Spread.Sheets.HorizontalAlign.center);
activeSheet.getCell(1, 1).hAlign(GC.Spread.Sheets.VerticalAlign.center);
activeSheet.getCell(1, 1).backColor("LightBlue");

// 셀 테두리 설정 
activeSheet.getRange(1, 3, 4, 5, GC.Spread.Sheets.SheetArea.viewport).setBorder(new GC.Spread.Sheets.LineBorder("Blue", GC.Spread.Sheets.LineStyle.medium), { all: true }, 3);

// 셀 배경색 설정
for (var i = 2; i < 5; i++)
   activeSheet.getCell(i, 2).backColor("lightGray");