▲

GN⁺: HN 소개: 노드 또는 용 CSS 레이아웃 엔진, Dropflow

 (github.com/chearon)
3P by neo 4달전 | favorite | 댓글 3개

Dropflow 소개

  • Dropflow는 기초적인 CSS 표준(인라인, 블록, 플로트, 포지셔닝, 테이블 등)의 범위를 탐색하기 위해 만들어진 CSS 레이아웃 엔진임.
  • 고품질의 텍스트 레이아웃 구현을 지원하며, 세계 여러 언어의 표시가 가능함.
  • 백엔드에서 Node와 node-canvas를 사용하여 PDF나 이미지를 생성하거나, 브라우저에서 캔버스로 풍부하고 감싸진 텍스트를 렌더링하는 데 사용할 수 있음.

주요 기능

  • float과 같은 복잡한 30개 이상의 속성 지원
  • 양방향 및 RTL 텍스트 지원
  • HTML과 CSS를 받아들이는 것 외에도 객체로 스타일을 지정하는 Hyperscript(h()) API 지원
  • 모든 OpenType/TrueType 버퍼를 등록해야 함
  • 그래피미 단위에서의 폰트 폴백
  • 색상 있는 발음 기호 지원
  • 바람직한 줄바꿈(예: 다음 줄로 시작 패딩 이동)
  • 최적화된 shaping
  • 상속 및 계단식 스타일은 두 번 계산되지 않음
  • 가능한 많은 CSS 레이아웃 엣지 케이스 처리
  • 완전한 타이핑
  • 많은 테스트
  • 빠름

지원되는 CSS 규칙

  • 인라인 포맷팅: color, direction, font-family, font-size, font-stretch, font-style, font-weight, line-height, text-align, vertical-align, white-space 등의 속성이 작동 상태임.
  • 블록 포맷팅: clear, float 속성이 작동 상태임.
  • 박스 및 포지셔닝: background-clip, background-color, border-color, border-style, border-width, top, right, bottom, left, box-sizing, display, height, margin, padding, position, width, z-index 등의 속성이 작동 상태임.

사용 방법

  • Dropflow는 상속받고 계산된 스타일을 가진 DOM에서 작동함.
  • h() 함수를 사용하여 DOM을 생성하고, 스타일을 일반 객체로 지정함.
  • 폰트를 레이아웃 전에 등록하는 것은 필수 단계임.
  • 캔버스의 전체 크기로 레이아웃하고 그림을 그릴 수 있음.

성능 특성

  • 성능은 정확성 다음으로 중요한 목표임.
  • 여러 예제를 통해 성능을 확인할 수 있음.
  • 2019년형 MacBook Pro에서 HTML을 이미지로 변환하는 데 9ms, 2012년형 MacBook Pro에서는 13ms가 소요됨.
  • 'The Little Prince'를 HTML에서 이미지로 변환하는 데 2019년형 MacBook Pro에서는 160ms 미만, 2012년형 MacBook Pro에서는 250ms 미만이 소요됨.
  • 10글자 단어를 생성하고 레이아웃하는 데(그리기 제외) 2019년형 MacBook Pro에서는 25µs 미만, 2012년형 MacBook Pro에서는 50µs 미만이 소요됨.
  • Hyperscript API를 사용하면 HTML과 CSS 파싱 단계를 건너뛰고 DOM을 직접 생성하여 가장 빠른 성능을 달성할 수 있음.

API

  • 폰트 등록 및 DOM 생성이 첫 두 단계임.
  • DOM을 캔버스에 렌더링하거나, 레이아웃을 유지하고 싶은 경우 하위 수준 함수를 사용할 수 있음.

HarfBuzz

  • 글리프 레이아웃은 WebAssembly로 컴파일된 HarfBuzz에 의해 수행됨.
  • 이를 통해 measureText API를 사용할 때는 불가능한 수준의 정확성을 달성할 수 있음.

감사의 말

  • dropflow는 package.json 의존성이 없지만, 많은 다른 프로젝트 덕분에 가능했음.
  • Javascript 의존성은 프로젝트에 맞게 수정되어 체크인되었음.

GN⁺의 의견

  • Dropflow는 웹 개발자들에게 CSS 레이아웃의 복잡성을 해결하고, 브라우저와 백엔드 모두에서 일관된 텍스트 레이아웃을 제공하는 새로운 도구임.
  • 이러한 도구는 특히 다양한 언어와 폰트를 지원해야 하는 국제화된 웹 애플리케이션 개발에 유용할 수 있음.
  • HarfBuzz를 사용하는 것은 텍스트 렌더링의 정확성을 크게 향상시킬 수 있지만, 웹어셈블리 기술에 익숙하지 않은 개발자에게는 진입 장벽이 될 수 있음.
  • 비슷한 기능을 제공하는 다른 프로젝트로는 CSS Grid와 Flexbox를 사용하는 레이아웃 라이브러리들이 있지만, Dropflow는 더 전통적인 CSS 레이아웃 방식에 초점을 맞추고 있음.
  • Dropflow를 도입하기 전에는 성능과 호환성을 고려하여 프로젝트 요구 사항과 잘 맞는지 평가해야 함.
▲
winterjung 4달전  [-]

원 제목은 "Show HN: Dropflow, a CSS layout engine for node or <canvas>" 이거였군요. 지금은 "GN⁺: HN 소개: 노드 또는 <canvas>용 CSS 레이아웃 엔진, Dropflow</canvas>"로 들어가있네요.

답변달기
▲
dlehals2 4달전  [-]

제목에 태그가 있으니 상세페이지 제목부분이 깨지는군요..ㅎㅎ escape를..

답변달기
▲
neo 4달전  [-]
Hacker News 의견
  • 브라우저 렌더링 엔진의 '마법 상자'를 명확히 설명하는 자료의 중요성을 강조함. HTML과 CSS 렌더링을 위한 기계가 읽을 수 있는 전체 사양을 만들 수 있다면, 렌더러를 생성할 수 있을 것이며, 브라우저의 특이점은 그 확장이 될 수 있음.
  • 오픈소스로 제공된 이 작업에 대한 감사를 표함. 백엔드에서 아름다운 PDF를 생성하는 현재의 방법은 헤드리스 브라우저를 실행하고 브라우저 API를 사용하여 HTML/CSS를 PDF로 변환하는 것인데, 이는 서버에서 브라우저 인스턴스를 실행하고 큰 작업 부하에 적절히 확장하는 것이 비용이 많이 든다고 함. 이제 브라우저 오버헤드 없이 HTML/CSS를 사용하여 PDF를 설계하고 생성할 수 있음.
  • CSS와 SVG를 그래픽 및 UI 라이브러리에 대한 추상화로 사용할 수 있는지에 대한 궁금증과 관련이 있음. node-canvas가 그림 그리기 부분을 채우는 것처럼 보이며, 이는 UI 라이브러리에서 필요한 레이아웃 부분을 할 수 있을 것으로 보임. CSS 구현의 어려움에 대한 의문을 제기함.
  • 프로젝트에 이와 같은 것을 찾고 있었고, SVG나 캔버스를 사용하는 다른 프로젝트에도 유용할 것이라는 감사의 말을 전함.
  • HTML을 PNG로 프로그래밍 방식으로 변환하는 것이 얼마나 어려운지 대부분의 사람들이 깨닫지 못할 것이라고 함. Node와 브라우저의 차이 또는 HTML과 캔버스의 차이와 관련된 수많은 작은 문제들에 직면하게 됨.
  • CSS를 이해하고 그 주위에 레이아웃 엔진을 구축하는 데 필요한 엄청난 작업량을 상상할 수 없다는 의견을 제시함.
  • Flexbox에 어려움을 겪는 사람들을 위해, 다양한 속성에 집중할 필요 없이 반응형 레이아웃을 만드는 과정을 간소화할 수 있는 도구를 소개함.
  • 이것이 큰 성과라며 축하를 전함. 많은 시간이 투자되었을 것이라고 확신하며, 스프레드시트 제품과 PDF(미리보기?) 제품도 만들고 있는지, 어떻게 결합하는지에 대한 궁금증을 표함.
  • 작업에 대한 칭찬과 함께 chearon에게 감사를 표함.
  • 이것을 NativeScript나 Node.js와 같은 것의 기본 요소로 사용할 가능성을 확인해볼 것이라고 공유함. 텍스트는 UI 프레임워크가 제공하는 가장 복잡한 UI 요소 중 하나이며, Flow Layout이 작동한다면 매우 고무적임. 제스처(특히 텍스트 강조) 및 IME 통합과 같은 기능이 얼마나 진행되었는지에 대한 관심을 표함. 어쨌든 오픈소스로 제공해준 것에 대한 칭찬을 전함.
답변달기