fix: [#2799] Change default Font Base Align to Top (#2925)

Closes #2799 This PR changes the default base align on Fonts to Top, this is more in line with user expectations. This does change the default rendering to the top left instead of the bottom left.
excaliburjs · Feb 5, 2024 · 74c9ade · 74c9ade
1 parent 3ce1de2
commit 74c9ade
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 14 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,6 +8,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 ### Breaking Changes
 
+- Changed the `Font` default base align to `Top` this is more in line with user expectations. This does change the default rendering to the top left corner of the font instead of the bottom left.
 - Remove confusing Graphics Layering from `ex.GraphicsComponent`, recommend we use the `ex.GraphicsGroup` to manage this behavior
   * Update `ex.GraphicsGroup` to be consistent and use `offset` instead of `pos` for graphics relative positioning
 - ECS implementation has been updated to remove the "stringly" typed nature of components & systems

diff --git a/src/engine/Graphics/Font.ts b/src/engine/Graphics/Font.ts
@@ -97,7 +97,7 @@ export class Font extends Graphic implements FontRenderer {
   public bold: boolean = false;
   public unit: FontUnit = FontUnit.Px;
   public textAlign: TextAlign = TextAlign.Left;
-  public baseAlign: BaseAlign = BaseAlign.Alphabetic;
+  public baseAlign: BaseAlign = BaseAlign.Top;
   public direction: Direction = Direction.LeftToRight;
   /**
    * Font line height in pixels, default line height if unset

diff --git a/src/spec/TextSpec.ts b/src/spec/TextSpec.ts
@@ -145,7 +145,8 @@ describe('A Text Graphic', () => {
         family: 'Open Sans',
         size: 18,
         quality: 1,
-        padding: 0
+        padding: 0,
+        baseAlign: ex.BaseAlign.Alphabetic
       })
     });
 
@@ -174,7 +175,8 @@ describe('A Text Graphic', () => {
         family: 'Open Sans',
         size: 18,
         quality: 1,
-        padding: 0
+        padding: 0,
+        baseAlign: ex.BaseAlign.Alphabetic
       })
     });
 
@@ -237,7 +239,8 @@ describe('A Text Graphic', () => {
         family: 'Open Sans',
         size: 18,
         quality: 1,
-        padding: 0
+        padding: 0,
+        baseAlign: ex.BaseAlign.Alphabetic
       })
     });
 
@@ -268,7 +271,8 @@ describe('A Text Graphic', () => {
         family: 'Open Sans',
         size: 18,
         quality: 1,
-        padding: 0
+        padding: 0,
+        baseAlign: ex.BaseAlign.Alphabetic
       })
     });
 
@@ -299,7 +303,8 @@ describe('A Text Graphic', () => {
         family: 'Open Sans',
         size: 18,
         quality: 1,
-        padding: 0
+        padding: 0,
+        baseAlign: ex.BaseAlign.Alphabetic
       })
     });
 
@@ -330,7 +335,8 @@ describe('A Text Graphic', () => {
         family: 'Open Sans',
         size: 18,
         quality: 1,
-        padding: 0
+        padding: 0,
+        baseAlign: ex.BaseAlign.Alphabetic
       })
     });
 
@@ -361,7 +367,8 @@ describe('A Text Graphic', () => {
         family: 'Open Sans',
         size: 18,
         quality: 1,
-        padding: 0
+        padding: 0,
+        baseAlign: ex.BaseAlign.Alphabetic
       })
     });
 
@@ -393,7 +400,8 @@ describe('A Text Graphic', () => {
         bold: true,
         size: 18,
         quality: 1,
-        padding: 0
+        padding: 0,
+        baseAlign: ex.BaseAlign.Alphabetic
       })
     });
 
@@ -423,7 +431,8 @@ describe('A Text Graphic', () => {
         style: ex.FontStyle.Italic,
         size: 18,
         quality: 1,
-        padding: 0
+        padding: 0,
+        baseAlign: ex.BaseAlign.Alphabetic
       })
     });
 
@@ -452,7 +461,8 @@ describe('A Text Graphic', () => {
         family: 'Open Sans',
         size: 18,
         quality: 1,
-        lineHeight: 36
+        lineHeight: 36,
+        baseAlign: ex.BaseAlign.Alphabetic
       })
     });
 
@@ -482,6 +492,7 @@ describe('A Text Graphic', () => {
         size: 18,
         quality: 1,
         padding: 0,
+        baseAlign: ex.BaseAlign.Alphabetic,
         shadow: {
           blur: 5,
           offset: ex.vec(4, 4),
@@ -669,7 +680,8 @@ describe('A Text Graphic', () => {
     const sut = new ex.Font({
       family: 'Open Sans',
       size: 18,
-      quality: 1
+      quality: 1,
+      baseAlign: ex.BaseAlign.Alphabetic
     });
 
     const text1 = new ex.Text({
@@ -819,7 +831,8 @@ describe('A Text Graphic', () => {
         family: 'Open Sans',
         size: 18,
         quality: 4,
-        padding: 0
+        padding: 0,
+        baseAlign: ex.BaseAlign.Alphabetic
       })
     });
 
@@ -1231,7 +1244,8 @@ describe('A Text Graphic', () => {
     const sut = new ex.Font({
       family: 'Open Sans',
       size: 18,
-      quality: 1
+      quality: 1,
+      baseAlign: ex.BaseAlign.Alphabetic
     });
 
     const text1 = new ex.Text({