[]
SpreadJS는 사용자가 Excel처럼 셀 내 텍스트 방향을 원하는 대로 설정할 수 있도록 지원합니다. 이를 통해 스프레드시트 내 데이터 표현의 유연성과 가독성이 향상됩니다.
기본적으로 셀에 텍스트를 입력하면 문자는 가로 방향으로 표시됩니다. 하지만 텍스트를 세로 방향으로 표시하고 싶은 경우, 아래 이미지처럼 텍스트를 세로로 스타일링할 수 있습니다.
셀에서 텍스트 방향을 세로로 전환하려면 CellRange 클래스의 isVerticalText 메서드를 사용할 수 있습니다. 이 메서드는 boolean 값을 매개변수로 받으며, true
를 전달하면 텍스트가 세로 방향으로 표시되고, false
를 전달하면 기본처럼 가로 방향으로 표시됩니다.
SpreadJS의 세로 텍스트 방향 기능은 수평 정렬과 수직 정렬을 지원합니다. vAlign 메서드(수직 정렬)와 hAlign 메서드(수평 정렬)를 조정하여 정렬 스타일을 지정할 수 있으며, 예시는 아래 이미지에서 확인할 수 있습니다.
세로 텍스트 방향에서 vAlign 및 hAlign 사용하기
셀에서 세로 텍스트 방향을 설정할 때 textIndent 메서드를 사용하여 텍스트 들여쓰기를 제어할 수도 있습니다. 아래 예시 이미지를 참고하여 주시기 바랍니다.
긴 단어가 세로 텍스트 방향 셀에 들어가기 어려운 경우에는 wordWrap 메서드를 사용하여 해당 텍스트를 셀 내에서 줄바꿈 처리할 수 있습니다. 예시는 아래 이미지에서 확인할 수 있습니다.
셀에서 줄바꿈 기능(wordWrap
)을 사용하고 싶지 않은 경우에는 shrinkToFit 메서드를 사용하여 Spread가 세로 텍스트의 글꼴 크기를 자동으로 줄이도록 할 수 있습니다. 이에 대한 예시는 아래 이미지에 확인할 수 있습니다.
wordWrap
과 shrinkToFit
기능을 모두 사용하고 싶지 않은 경우, AutoFitType Enumeration을 사용하여 Spread가 셀의 너비와 높이를 자동으로 조정하여 모든 내용을 동일한 셀에 맞출 수 있도록 설정할 수 있습니다. 관련 예시는 아래 이미지에서 확인할 수 있습니다.
다음 코드 샘플은 isVerticalText 메서드에 boolean 값 "true"
를 전달하여 셀 D4의 텍스트 방향을 세로로 설정하는 방법을 보여줍니다.
Ask ChatGPT
var sheet = spread.getActiveSheet();
sheet.setRowHeight(3,150);
sheet.getCell(3,3).value("SpreadJS").isVerticalText(true);
sheet.getCell(3,4).value("SpreadJS").isVerticalText(false);
SpreadJS를 사용하면 셀의 텍스트 방향을 왼쪽에서 오른쪽(기본값)에서 오른쪽에서 왼쪽으로 변경할 수 있습니다. 이때 구두점도 텍스트의 왼쪽에 표시되며, TextDirectionType 열거형을 사용하여 스타일의 textDirection 속성을 rightToLeft 로 설정하면 됩니다.
RTL(오른쪽에서 왼쪽) 텍스트 방향은 아랍어 및 히브리어처럼 오른쪽에서 왼쪽으로 쓰고 읽는 언어와 스크립트에 적합합니다. 이를 통해 해당 언어로 작업할 때 데이터를 올바르고 자연스럽게 표시할 수 있습니다.
참고: 현재 SpreadJS에서는 아랍어 및 히브리어 문자에 대해서만 오른쪽에서 왼쪽 텍스트 방향이 적용됩니다.
다음 코드 샘플은 TextDirectionType 열거형을 사용하여 텍스트 방향을 설정하는 방법을 보여줍니다.
// getCell 메서드와 textDirection 메서드를 사용하는 예시입니다.
activeSheet.getCell(0, 0).textDirection(GC.Spread.Sheets.TextDirectionType.rightToLeft).value("هذه الفقرة باللغة العربية ، لذا يجب الانتقال من اليمين إلى اليسار.");
// 또는
// getRange 메서드와 textDirection 메서드를 사용하는 예시입니다.
activeSheet.getRange(1, -1, 1, -1).textDirection(GC.Spread.Sheets.TextDirectionType.rightToLeft);
activeSheet.setValue(1, 1, "هذه الفقرة باللغة العربية ، لذا يجب الانتقال من اليمين إلى اليسار.");
activeSheet.setValue(1, 3, "هذه الفقرة باللغة العربية ، لذا يجب الانتقال من اليمين إلى اليسار.");
// 또는
//textDirection 속성과 함께 setStyle 메서드를 사용하는 예시입니다.
var style = new GC.Spread.Sheets.Style();
style.textDirection = GC.Spread.Sheets.TextDirectionType.rightToLeft;
activeSheet.setStyle(2, 2, style, GC.Spread.Sheets.SheetArea.viewport);
activeSheet.setValue(2, 2, "هذه الفقرة باللغة العربية ، لذا يجب الانتقال من اليمين إلى اليسار.");
SpreadJS의 텍스트 방향 기능은 인쇄 및 PDF 파일 내보내기를 지원합니다. 또한 .sjs
, .ssjson
, .xlsx
파일을 가져오거나 내보낼 때도 텍스트 방향이 유지됩니다.
참고: 오른쪽에서 왼쪽(RTL) 텍스트 방향은 차트, 도형, 주석(Comments), 슬라이서(Slicer)에는 적용되지 않습니다. 또한, SpreadJS Designer에서는 TableSheets, GanttSheets, ReportSheets에서 텍스트 방향을 변경할 수 없습니다.
오른쪽에서 왼쪽 텍스트 방향은 영어, 중국어, 일본어, 한국어 문자에는 적용되지 않습니다.