Git Product home page Git Product logo

Comments (5)

hecrj avatar hecrj commented on August 28, 2024 1

Something like this:

let mut section = Section {
    text: "gŽ",
    color: [0.0, 0.0, 0.0, 1.0],
    scale: Scale::uniform(scale as f32),
    bounds: (size.width as f32, size.height as f32),
    ..Section::default()
};

let pixel_bounds =
    glyph_brush.pixel_bounds(section).expect("Pixel bounds");

section.screen_position = (
    size.width as f32 * 0.5 - pixel_bounds.min.x as f32 * 0.5,
    size.height as f32 * 0.5 - pixel_bounds.min.y as f32 * 0.5,
);

section.layout = Layout::default_single_line()
    .h_align(HorizontalAlign::Center)
    .v_align(VerticalAlign::Center);

glyph_brush.queue(section);

Produces:

image

It doesn't seem to be entirely centered still (?).

from wgpu_glyph.

hecrj avatar hecrj commented on August 28, 2024

glyph-brush's vertical align doesn't align a set of glyphs in particular. It think it only uses the font properties, so it accounts for accents and other kind of symbols on top of some glyphs.

image

This is desirable for most use cases when you have dynamic text because it avoids awkward jumps. I am guessing the small difference that is still left depends entirely on the font.

If you want to completely center the produced glyphs, you should be able to use GlyphBrush::pixel_bounds (from the GlyphCruncher implementation) and then set the screen_position appropriately when queueing.

from wgpu_glyph.

hecrj avatar hecrj commented on August 28, 2024

Also, I am sure we could implement our own GlyphPositioner to do this directly without using pixel_bounds.

from wgpu_glyph.

paulkernfeld avatar paulkernfeld commented on August 28, 2024

I was also imagining a centering strategy that did not depend dynamically on the particular glyphs.

Maybe it's wrong to approach this with the expectation that the baseline of the text and the top of a capital letter are perfectly equidistant from the edges; I'm not an expert in text layout. Trying out a bunch of different fonts in a text box in Google Docs, the vertical alignment seems to depend a bit on the selected typeface.

Overall I think it might make sense to close this issue, since it seems like wgpu_glyph is probably handling vertical centering in a good wya.

from wgpu_glyph.

hecrj avatar hecrj commented on August 28, 2024

The built-in glyph-brush glyph positioner uses rusttype::VMetrics, which seems to talk about highest/lowest glyph points, to align lines.

I am not sure if fonts provide enough information to perform the alignment you describe, but rusttype doesn't seem to expose it.

from wgpu_glyph.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.