Font outline does not line up using TLF_CENTERED or TLF_RIGHT

Comments

• hgy29 Maintainer

  January 2019

  Yes, this is expected since the outlined version of the font is slightly larger than the original one. Centering or right aligning use the text width in the computation, final x values are then not exactly the same for both versions

  +1 -1Share on Facebook
• EricCarr Member

  January 2019

  So, calculating the width of the text does not take into account the extra padding?
  
  I would expect centering to be correct, and only right to be skewed.
  
  In right justified, why doesn't the black text line up exactly on the right line? It instead is slightly to the left. Seems like there is some correcting being applied but it isn't calculating right.
  
  Also, the difference between the two is different in centered and right justified, which again indicates different width calculated or something is off with the padding calculation.
  
  
  

  +1 -1Share on Facebook
• EricCarr Member

  January 2019

  Adding this simple test code afterward fixes it (where textO contains the extra padding):

  if o.flags == FontBase.TLF_CENTER then local delta = textO:getWidth()-text:getWidth() textO:setPosition(x+delta/2,y) elseif o.flags == FontBase.TLF_RIGHT then local delta = textO:getWidth()-text:getWidth() textO:setPosition(x+delta,y) end

  For centering, I have to shift it half the difference in width to the right.
  For right, I have to shift it the entire difference in width to the right.
  
  I would be great if this calculation would be part of the engine so we don't have to do the above on every setText operation in code, maybe an option when creating the textField?
  
  Thanks,
  Eric

  Dislikes: John

  +1 -1 (+0 / -1 )Share on Facebook
• hgy29 Maintainer

  January 2019 Accepted Answer

  This is because freetype library adds itself the offset so that text is at the right place when using the same x location. For your suggestion, yes it would be good but current gideros api only deals with a single font at a time, and doesn’t have access to the other one to compute differences

  Likes: EricCarr

  +1 -1 (+1 / -0 )Share on Facebook
• hgy29 Maintainer

  January 2019

  Thinking of it, the best way would be to have a composite font type, so that the outlined and the base font version are drawn at the same time: no duplicate computations, no duplicate text field creation

  Likes: EricCarr, vitalitymobile

  +1 -1 (+2 / -0 )Share on Facebook
• EricCarr Member

  January 2019

  I also see that when it wants to wrap the text and I prevent it by adding w=N or _NOWRAP, the offset is doubled. Agreed, composite is a great solution and probably best for a future update .
  
  For now I'll update my custom TextFieldO (drop in replacement that creates two textfield children, one with an outline) to always use _LEFT and use getWidth() to set the X position for centering/right whenever settext() is called.

  +1 -1Share on Facebook
• EricCarr Member

  January 2019

  In case it helps anyone, here is my custom class below. It turns out that if nowrap is turned on, or a width is applied, the outlined text gets skewed more for every space and less for every line break ("\n"). Hence the extra checks. One known issue - if you make the Width at just the right amount so the bigger outline wraps but the smaller regular font does not wrap, it won't catch that. But it solves all my use cases.

  TextFieldO = Core.class(Sprite) function TextFieldO:init(ignored, text, d, flags, color) local s= self s.to = TextField.new(fontO, text,d,flags) s.t = TextField.new(font, text, d,flags) s.t:setTextColor(color or 0xffffff)   s:addChild(s.to) s:addChild(s.t) s:updateLayout(text) end   function TextFieldO:setText(text) self.to:setText(text) self.t:setText(text) self:updateLayout(text) end   function TextFieldO:updateLayout(text) text = "" .. text local l = self.to:getLayout() local flags = l.flags   local ow,w = self.to:getWidth(), self.t:getWidth() local delta = ow-w   if (flags & FontBase.TLF_NOWRAP == FontBase.TLF_NOWRAP ) or l.w>0 then local mult = 1 for i=#text,1,-1 do local c = string.sub(text,i,i) if c== " " then mult += 1 elseif c == "\n" then mult -= 1 end end if mult <=1 then mult = 1 end delta*= mult end   if flags & FontBase.TLF_CENTER == FontBase.TLF_CENTER then self.to:setPosition(delta*0.5,0) elseif flags & FontBase.TLF_RIGHT == FontBase.TLF_RIGHT then self.to:setPosition(delta,0) end end   function TextFieldO:setTextColor(color) self.t:setTextColor(color) end

  Likes: hgy29, Apollo14, pie, antix

  +1 -1 (+4 / -0 )Share on Facebook
• hgy29 Maintainer

  January 2019

  I have added on new font type in gideros for this purpose:

  local nf = TTFont.new("OpenSans-ExtraBold.ttf", 50, str,true) --Normal local of = TTFont.new("OpenSans-ExtraBold.ttf", 50,str,true,3) --Outlined local cf= CompositeFont.new{ { font=of, color=0x000000 }, --Draw outline in black { font=nf, x=1,y=2 }, --Draw normal text with an offset }

  Likes: vitalitymobile, EricCarr, antix, MoKaLux

  +1 -1 (+4 / -0 )Share on Facebook
• EricCarr Member

  January 2019 edited January 2019

  Awesome news hgy29! Can't wait to try it out!
  
  In case it helps, here is a "unit test" I made to test out the various font conditions:

  local fontO = TTFont.new("PressStart2P.ttf", 10,"", false,1) local font = TTFont.new("PressStart2P.ttf", 10,"", false)   local function addText(t,x,y, o)   local text = TextFieldO.new(fontO, t,nil,o,0xffff00) -- replace with composite text:setPosition(x,y) stage:addChild(text) end   local y, delta =25, 25 addText("WORLD\n1",150,y, {flags=FontBase.TLF_LEFT}) y+=delta addText("WORLD\n1",150,y, {flags=FontBase.TLF_RIGHT}) y+=delta addText("WORLD\n1",150,y, {flags=FontBase.TLF_CENTER }) y+=delta*2   addText("WORLD 2",150,y, {flags=FontBase.TLF_LEFT}) y+=delta addText("WORLD 2",150,y, {flags=FontBase.TLF_RIGHT}) y+=delta addText("WORLD 2",150,y, {flags=FontBase.TLF_CENTER }) y+=delta*2   addText("NOWRAP 3",150,y, {flags=FontBase.TLF_LEFT | FontBase.TLF_NOWRAP}) y+=delta/2 addText("NOWRAP 3",150,y, {flags=FontBase.TLF_RIGHT | FontBase.TLF_NOWRAP}) y+=delta/2 addText("NOWRAP 3",150,y, {flags=FontBase.TLF_CENTER | FontBase.TLF_NOWRAP}) y+=delta   addText("NOWRAP with spaces",150,y, {flags=FontBase.TLF_CENTER | FontBase.TLF_NOWRAP}) y+=delta addText("NOWRAP spaces\nand a break",150,y, {flags=FontBase.TLF_CENTER | FontBase.TLF_NOWRAP}) y+=delta*1.5   addText("BLOCK4",150,y, {flags=FontBase.TLF_LEFT | FontBase.TLF_NOWRAP}) y+=delta/2 addText("BLOCK4",150,y, {flags=FontBase.TLF_RIGHT | FontBase.TLF_NOWRAP}) y+=delta/2 addText("BLOCK4",150,y, {flags=FontBase.TLF_CENTER | FontBase.TLF_NOWRAP}) y+=delta   addText("WID1",50,y, {flags=FontBase.TLF_LEFT, w=100}) y+=delta/2 addText("WID1",50,y, {flags=FontBase.TLF_RIGHT, w=100}) y+=delta/2 addText("WID1",50,y, {flags=FontBase.TLF_CENTER,w=100}) y+=delta   addText("WID 2",50,y, {flags=FontBase.TLF_LEFT, w=100}) y+=delta/2 addText("WID 2",50,y, {flags=FontBase.TLF_RIGHT, w=100}) y+=delta/2 addText("WID 2",50,y, {flags=FontBase.TLF_CENTER,w=100}) y+=delta   -- Known issue - The outline font wraps but the (slightly smaller width) font does not. addText("WID 3",50,y, {flags=FontBase.TLF_LEFT, w=50}) y+=delta addText("WID 3",50,y, {flags=FontBase.TLF_RIGHT, w=50}) y+=delta addText("WID 3",50,y, {flags=FontBase.TLF_CENTER,w=50}) y+=delta

  +1 -1Share on Facebook