DOI QR코드

DOI QR Code

Design of CSS3 Extensions for Polar-Coordinate Text Layout in Web Documents

웹문서 내의 극좌표계 텍스트 배치를 위한 CSS3 확장사양 설계

  • Received : 2016.05.17
  • Accepted : 2016.07.14
  • Published : 2016.10.15

Abstract

Demand for text arranged in a circular shape is increasing as devices with round display such as smart watches are now being actively released. Data visualization field is receiving a lot of attention as the era of big data evolves. However, current web standard does not support the drawing of circular text. Therefore, the objective of this study was to extend CSS3 specifications to have circular text layout in web documents. In addition, we implemented a preprocessor so that contents made with CSS3 extensions could be shown in existing browsers. To confirm the wide expression range of CSS3 extension, we prepared some sample contents and analyzed them.

최근 스마트워치 등 원형 기기들이 출시되고, 빅데이터 시대로 데이터 시각화 분야가 주목을 받으면서 글자의 원형 배치에 대한 요구가 증가하고 있다. 하지만 현재 웹문서에서 글자를 원형이나 부채꼴로 배치하는 방법을 따로 지원하지 않는다. 이에 따라 본 연구는 웹브라우저 환경에서 CSS 스타일시트와 HTML로 표현되어 있는 웹문서 내의 글자를 원이나 부채꼴의 중심을 기준으로 하는 극좌표계로 배치할 수 있도록 CSS3 사양을 확장하였다. CSS3 사양 확장에 앞서 사례조사를 통하여 극좌표계 표현에 대한 요구사항을 분석하였으며 기존의 사각형이 아닌 부채꼴 서식모델을 제안하고 이에 맞추어 세부적인 텍스트 배치 사양을 정의하였다. 또한, 확장된 CSS3 사양으로 작성한 콘텐츠를 기존 브라우저에서 확인할 수 있도록 전처리기를 구현하고 샘플 콘텐츠를 작성하여 제안한 확장사양의 적합성을 검증하였다.

Keywords

References

  1. H.-J. Lee. (2015, Feb. 19), "Smart Watch 'Square.Circle'...Shape war on a wrist," Kyunghyang [Online]. Available: http://bizn.khan.co.kr/khan_art_view.html?artid=201502190617191&code=920100&med=khan(downloaded 2015, Nov. 22) (in Korean)
  2. S.-H. Park. (2015.10.02.). "KT sales Samsung Gear S2... "installment with Samsung phones," ZDNet Korea [Online]. Available: http://www.zdnet.co.kr/news/news_view.asp?artice_id=20151002103535&type=det&re= (downloaded 2015, November 22) (in Korean)
  3. E. J. Etemad, "Robust vertical text layout," 27th Internationalization and Unicode Conference, pp. 15-16, 2005.
  4. S. Han, H. Song, and J. Hong. (22 September 2015). "CSS Round Display Level 1," W3C FPWD [Online]. Available: http://www.w3.org/TR/css-round-display-1/ (downloaded 2015, November 22)
  5. H.-J. Lee, H.-J. Yim, and S.-B. Lim, "3D Stereoscopic Representation of Web Content with CSS3 Stylesheet," Journal of KIISE : Computing Practices and Letters, Vol. 20, No. 2, pp. 84-89, Feb. 2014. (in Korean)
  6. D. Weber, (2011), "CSSWARP, CSS Text to Path Generator," [Online]. Available: http://csswarp.eleqtriq.com/(downloaded 2015, November 22)
  7. B. Bos, T. Celik, I. Hickson, and H. W. Lie. (07 June 2011), "Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification-9 Visual formatting model," W3C Recommendation [Online]. Available: http://www.w3.org/TR/CSS21/visuren.html (downloaded 2015, November 22)
  8. B. Bos, (9 August 2007), "CSS basic box model," W3C WD [Online]. Available: http://www.w3.org/TR/css3-box/ (downloaded 2015, November 22)
  9. L. Chor, "Online Vertical Layout: Chinese Characters, Images and the Web," Journal of East Asian Libraries, Vol. 143, No. 1, pp. 1-10, 2007.
  10. Y. Nishiyama, "The Mathematics of Direction in Writing," International Journal of Pure and Applied Mathematics, Vol. 61, No. 3, 2010.