Apresentação do Dropflow
- Dropflow é um motor de layout CSS criado para explorar o escopo dos padrões básicos de CSS (inline, bloco, float, posicionamento, tabelas etc.).
- Oferece suporte à implementação de layout de texto de alta qualidade e consegue exibir vários idiomas do mundo.
- Pode ser usado no backend com Node e node-canvas para gerar PDFs ou imagens, ou no navegador para renderizar texto rico e com quebra de linha em canvas.
Principais recursos
- Suporte a mais de 30 propriedades complexas, como
float
- Suporte a texto bidirecional e RTL
- Além de aceitar HTML e CSS, oferece uma API Hyperscript (
h()) para definir estilos como objetos
- É necessário registrar todos os buffers OpenType/TrueType
- Fallback de fonte no nível de grafema
- Suporte a sinais diacríticos com cor
- Quebras de linha desejáveis (ex.: mover o padding inicial para a próxima linha)
- Shaping otimizado
- Estilos herdados e em cascata não são calculados duas vezes
- Trata o máximo possível de casos extremos de layout CSS
- Tipagem completa
- Muitos testes
- Rápido
Regras CSS suportadas
- Formatação inline: propriedades como
color, direction, font-family, font-size, font-stretch, font-style, font-weight, line-height, text-align, vertical-align, white-space e outras estão funcionais.
- Formatação em bloco: as propriedades
clear e float estão funcionais.
- Caixa e posicionamento: propriedades como
background-clip, background-color, border-color, border-style, border-width, top, right, bottom, left, box-sizing, display, height, margin, padding, position, width, z-index e outras estão funcionais.
Como usar
- Dropflow funciona em um DOM com estilos herdados e computados.
- Use a função
h() para criar o DOM e definir estilos como objetos comuns.
- Registrar as fontes antes do layout é uma etapa obrigatória.
- É possível fazer o layout e desenhar no tamanho total do canvas.
Características de desempenho
- Desempenho é o objetivo mais importante depois da precisão.
- É possível verificar o desempenho por meio de vários exemplos.
- Em um MacBook Pro 2019, leva 9ms para converter HTML em imagem; em um MacBook Pro 2012, 13ms.
- Para converter 'The Little Prince' de HTML em imagem, leva menos de 160ms em um MacBook Pro 2019 e menos de 250ms em um MacBook Pro 2012.
- Para gerar e fazer o layout de uma palavra de 10 letras (sem desenhar), leva menos de 25µs em um MacBook Pro 2019 e menos de 50µs em um MacBook Pro 2012.
- Usando a API Hyperscript, é possível pular as etapas de parsing de HTML e CSS e criar o DOM diretamente para obter o melhor desempenho.
API
- Registro de fontes e criação do DOM são as duas primeiras etapas.
- É possível renderizar o DOM em um canvas ou usar funções de nível mais baixo caso queira manter o layout.
HarfBuzz
- O layout de glifos é feito pelo HarfBuzz compilado para WebAssembly.
- Isso permite alcançar um nível de precisão impossível ao usar a API
measureText.
Agradecimentos
- O dropflow não tem dependências em
package.json, mas só foi possível graças a muitos outros projetos.
- As dependências Javascript foram modificadas para se adequar ao projeto e incluídas diretamente no repositório.
Opinião do GN⁺
- Dropflow é uma nova ferramenta para desenvolvedores web resolverem a complexidade do layout CSS e oferecerem um layout de texto consistente tanto no navegador quanto no backend.
- Esse tipo de ferramenta pode ser especialmente útil no desenvolvimento de aplicações web internacionalizadas que precisam oferecer suporte a vários idiomas e fontes.
- O uso de HarfBuzz pode melhorar bastante a precisão da renderização de texto, mas também pode representar uma barreira de entrada para desenvolvedores pouco familiarizados com a tecnologia WebAssembly.
- Outros projetos com funções semelhantes incluem bibliotecas de layout que usam CSS Grid e Flexbox, mas o Dropflow foca em uma abordagem mais tradicional de layout CSS.
- Antes de adotar o Dropflow, vale avaliar se ele combina bem com os requisitos do projeto, considerando desempenho e compatibilidade.
3 comentários
O título original era
"Show HN: Dropflow, a CSS layout engine for node or <canvas>". Agora ele está aparecendo como"GN⁺: HN 소개: motor de layout CSS para node ou <canvas>, Dropflow</canvas>".Como há uma tag no título, a parte do título na página de detalhes fica quebrada.. hehe. Tem que fazer escape..
Comentários do Hacker News
node-canvasparece preencher a parte de desenho, e isto aparenta conseguir fazer a parte de layout necessária em bibliotecas de UI. Levanta a questão de por que implementar CSS é tão difícil.