텍스트 방향

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(오른쪽에서 왼쪽) 텍스트 방향은 아랍어 및 히브리어처럼 오른쪽에서 왼쪽으로 쓰고 읽는 언어와 스크립트에 적합합니다. 이를 통해 해당 언어로 작업할 때 데이터를 올바르고 자연스럽게 표시할 수 있습니다.

다음 코드 샘플은 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 파일을 가져오거나 내보낼 때도 텍스트 방향이 유지됩니다.

제한 사항

• 오른쪽에서 왼쪽 텍스트 방향은 영어, 중국어, 일본어, 한국어 문자에는 적용되지 않습니다.