Hacktoberfest 2026: as issues que os mantenedores marcaram para outubro, abertas e boas para iniciantes. Ver issues do Hacktoberfest

Raster Graphics TextMeasure for SVG

Aberta
  • Algo errado?
#2,407 0 comentários 1 reação 1 responsável Ver no GitHub

Mantenedores costumam responder em até 1 dia

@Danielku15 já está trabalhando nisso.

Desde 4/12/2025.

Avaliação

Esta issue ainda não foi avaliada.

Descrição

The SVG rendering currently uses a rather hacky text measurement engine where we pre-compute certain character sizes and then sum them up. for bold and italic we just add a factor.

This is error prone and often imprecise.

To eliminate this problem we should implement a new text-renderer for all platforms.

C#/Kotlin

For C# and Kotlin it's fairly easy: We simply use alphaSkia. Any potential custom-fonts should be registered there already.

JS Node

Same as for C#/Kotlin we can rely on alphaSkia.

JS Browser

Here it gets tricky. In Web Workers we do not have access to the web fonts loaded so we need to find something different:

  1. The general idea is to use a OffScreenCanvas and load all fonts into the worker context using the font loading APIs.
  2. To pass the web fonts to the worker context we do the following:
    1. We allow users to explicitly specify the font sources. If users specify the location we can pass the metadata to the worker and load the fonts there. The config would be similar to how we have it for the SMuFl Fonts. For one font, we might have multiple sources.
      1. We should align the options to the properties available for FontFace definitions (family, style, weight, src, unicode-range). As this feature is web-only we can use the web type definitions directly.
    2. If no font source is specified, we try to auto-detect it. Unfortunately FontFace does not give us access to the original source.
      1. Array.from(document.styleSheets).flatMap(y => Array.from(y.rules).filter(z => z instanceof CSSFontFaceRule)) gives us access to all custom web font definitions.
      2. For every font needed in the rendering, we lookup the matching CSS font rules (matching can be rather loose, better have more fonts than less).
      3. We fill the remaining font definitions.
Linguagem predominante
TypeScript
Estrelas
1.9k
Forks
297
Merge médio
9h 2min
PRs com merge (30d)
44

Preparar o ambiente

Este projeto não oferece contêiner de desenvolvimento, Dockerfile nem guia de contribuição, então a configuração fica por sua conta: comece pelo README e veja nosso guia da primeira contribuição para os passos gerais.

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de CoderLine/alphaTab

Todas as issues de CoderLine/alphaTab

Issues semelhantes

Mais issues de TypeScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.