Comments (28)
@tannewt @jerryneedell @makermelissa @djecken @jedgarpark FYI - im gonna change the way text displays right now because all text is Y offset (i eyeballed it and didnt notice till now)
ill make it so the top left corner is the origin point - perhaps it was at one point and we messed with it
from adafruit_circuitpython_display_text.
https://nerdparadise.com/programming/pygame/part5
from adafruit_circuitpython_display_text.
https://pico-8.fandom.com/wiki/Print
from adafruit_circuitpython_display_text.
adafruit gfx does baseline https://github.com/adafruit/Adafruit-GFX-Library/blob/master/Adafruit_GFX.cpp#L1033
from adafruit_circuitpython_display_text.
Cairo does baseline: https://www.cairographics.org/manual/cairo-text.html#cairo-show-text
https://www.cairographics.org/samples/text_align_center/
from adafruit_circuitpython_display_text.
Thinking more about this I don't think we want baseline because it handles multiline text poorly. The examples above don't handle multiline layout themselves but TextArea does.
Before we add anchor options, I think defaulting to vertical center of the left edge of the text would provide the best default behavior for both single and multiline text.
Since the overall bounding box is much larger than most glyphs, I think we should use the capital M's measurements to determine line size. Therefore, the vertical center would be (number_of_lines * height_of_M + (number_of_lines - 1) * line_spacing) / 2 + ascender_height
relative to the top left. Ascender height is the difference between the max height and the height of capital M after baseline adjustments.
We cannot base the origin on the actual glyphs because that risks different alignment across aligned TextAreas.
Does that make sense?
Later we can add top left and bottom left anchors based on the M too. We'll also want to expose a bounding box or vertical padding so the user can account for ascenders and descenders.
I also think we should remove width
and height
in favor a flat max_glyph_count
. Width and height are confusing and make no sense with variable font spacing.
from adafruit_circuitpython_display_text.
ok - how would you calculate size of a text area before creating it? we'd have the bounding box be a static function?
from adafruit_circuitpython_display_text.
Why do you need the size before creating it? The vertical alignment should be done for you.
from adafruit_circuitpython_display_text.
word-wrap calculation?
from adafruit_circuitpython_display_text.
@tannewt ok now that default is center left... i could add justifications like left
(default), center
and right
want it as an initializer arg?
from adafruit_circuitpython_display_text.
Would justification change the origin or just the layout? __init__
arg is the way to go.
from adafruit_circuitpython_display_text.
easiest would be changing origin: center would now be center of label (how else could you know for a single line what centering is?) and right would be center-right of label
from adafruit_circuitpython_display_text.
Asking for clarity. Justification and origin location don't need to be tied to one another. You could center against the widest line.
from adafruit_circuitpython_display_text.
ok if you have a center or right-justified label with text that changes, you'd have to move it every time you changed the text
from adafruit_circuitpython_display_text.
You could have a separate origin (or anchor) property that changes how the text is positioned. I don't think it's safe to assume changing the justification should also change the origin.
from adafruit_circuitpython_display_text.
ok - we'd have to layout all the glyphs, then move them in a secondary pass
from adafruit_circuitpython_display_text.
When we add it we could use a nested group to handle the anchor changes. That way the glyphs have fixed position.
from adafruit_circuitpython_display_text.
! good idea - i may get to it this weekend when i redo buttons
from adafruit_circuitpython_display_text.
Thanks! I appreciate all of your help with the text layout. It is awesome because of you!
from adafruit_circuitpython_display_text.
yay - im still wrapping my head around groups im used to a decade of bitmap alignments
from adafruit_circuitpython_display_text.
Coming back to this because we had someone in the discord run into a case where the M
character wasn't present in their bdf
and it caused issues. This isn't as uncommon as it might seem - it's super common to see people prepare fonts for just special glyphs.
I also find the behavior of the y
of the Label being the vertical center of the text to be extremely surprising, especially for dynamic text that could flow into two lines. It's also not quite correct for non-English glyphs, such as Á
.
As a suggestion, I'd propose we go to the same behavior as PICO8, Cairo, and other common font renders: the x
and y
of the text object should be the top-left of the bounding box. We can add helpers to align the text to other positions.
So, something like:
from adafruit_display_text import TextArea
font = ..
text = TextArea(font, "Hallo Ásta\nGóðan daginn", color=0xFFCC00)
# The extents of the text can be used directly to align the text,
# in this example, it centers the text on the display.
text.x = display.width / 2 - text.width / 2
text.y = display.height / 2 - text.height / 2
# Or helper methods can be used
text.center(display.width / 2, display.height /2)
text.center_horizontal(display.width / 2)
text.center_vertical(display.height / 2)
text.left_align(x=20)
text.right_align(x=160)
text.top_align(y=20)
text.bottom_align(y=120)
from adafruit_circuitpython_display_text.
We did the vertical y alignment to have the best result when rendering text in a button. Having it be the top left requires adjustment depending on the number of lines of text where vertical centering looks somewhat better.
I'd love to see other options available though.
from adafruit_circuitpython_display_text.
Maybe there could be a parameter to have it vertically center as it does now or align to the top by default? That way for button code we could pass a parameter that tells it to align centered and not break code. Or the other way around.
from adafruit_circuitpython_display_text.
I just came across this while trying to figure out how to recalculate y for multiline dynamic text to do top vertical alignment. I see that it actually recalculates the y position for multiline text, but could there be another parameter that skips that for vertical top option. Something like align=top/center/bottom
to change the alignment.
I realize that this was made to make it easy for buttons, but what about adding functionality for Text Box that could have a set size and include word wrapping. and handle text overflow.
from adafruit_circuitpython_display_text.
I did a pull request to see if I could add the align parameter. It basically just lets you opt out of the y_offset for _update_text so that the text remains aligned at the top.
from adafruit_circuitpython_display_text.
Has this been taken care of by #22 ?
from adafruit_circuitpython_display_text.
@caternuson Ah, yes that one would work but it did not look like it was live yet. I ended up doing a roundabout way to do top align for the Guide that I am working on and just hoped that something less hacky/redundant would get pushed to this library.
Thanks
from adafruit_circuitpython_display_text.
This appears to have been resolved.
from adafruit_circuitpython_display_text.
Related Issues (20)
- Missing Type Annotations HOT 1
- Spaces are deleted when word-wrapping HOT 1
- Updates to text are inefficient for special case of same length and width text HOT 3
- bitmap_label losing direction HOT 6
- Suppress warnings in bitmap_label HOT 1
- Use `fontio.FontProtocol` for type annotations
- Label can take Tuple[int, int, int] for color HOT 1
- wrap_text_to_pixels() cannot handle Windows line endings HOT 1
- bitmap_label flicker HOT 1
- Unable to update scrolling_label text outside constructor HOT 2
- Exception with multiple consecutive newlines in bitmap label
- label.Label padding is wrong when using DWR or UPR HOT 5
- button simpletest throws error on PyPortal Titano HOT 1
- bitmap_label errors if no bitmaptools module present
- ValueError from negatives on first character
- Convert `.show()` to `.root_group =` for CircuitPython 9
- Program stops without any error when importing the library HOT 4
- bitmap label cuts off part of text HOT 3
- Add error handling for misspelled kwargs in adafruit_display_text.label HOT 4
- Feature Request: wrap_text_to_pixels truncate argument
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from adafruit_circuitpython_display_text.