Text center and width:auto

Elements Typography
1

Hello everyone. I have a text box whose text alignment should be centered. It only works with my CSS style 'textCenter' when 'width' is not set to 'auto'. But that's exactly what I want to have. When 'width' is set to 'auto', the text alignment is always on the left. Any ideas? Thanks in advance.

Regards, Kalle

center_text.hype.zip (21.6 KB)

1 Like
2

It may be because

height: 100% gives the element 100% height of its parent container.
height: auto means the element height will depend upon the height of its children .

Yes did a google to clarify it as I have never really thought about or checked the difference between the two.

1 Like
3

Sorrrry, I´m such a... :crazy_face: I attached the wrong file... It´s not about height, it´s about centering text as described above...

textCenterCSS.zip (15.4 KB)

4

Ah,

Probably someone can do it in pure css but I would just throw some code at it.

the css :

.textCenter{
	white-space: nowrap !important;
	border-radius	: 5px !important;
   	width			: auto!important;
  	height			: auto!important;
   	text-align		: center !important;
      		 
}

The js:

	var hypeEl = document.getElementById(hypeDocument.documentId());
    var currentWidth = hypeEl.offsetWidth;
    
	var myText 				= 'Bosnien und Herzegowina';
	var textDisplay 		= document.querySelector ('.textDisplay');
	 
	textDisplay.innerHTML	= myText;
	var textDisplayWidth = textDisplay.offsetWidth  ;
   
  hypeDocument.setElementProperty(textDisplay, 'left',  ((currentWidth/ 2 ) - (textDisplayWidth / 2 )))

textCenterCSS_v2.hype.zip (18.4 KB)

We are getting the scenes width / 2 and the text elements width / 2 then deducting the resulting text width from the resulting scene width.
This should then move the text box to a new left position where it will in the center of the scene's middle.

2 Likes
5

Thanks a lot Mark. Works perfect for me. Next step - I have to get it working in my daily working setup, and that´s a scaling environment using a scalewrapper. Tried to figure it out and I think, I´m somehow on the right track. Doesn´t work properly anyway... my never ending struggle with relative measures, getBoundingClientRect()... you name it :grinning: What the heck am I doing wrong?

var myText = 'Bosnien und Herzegowina';
    
    var scaleWrapper = document.querySelector ('.scaleWrapper');
	var currentWidth= scaleWrapper.getBoundingClientRect().width;
		console.log(currentWidth);
    

	var textDisplay = document.querySelector ('.textDisplay');
	var textDisplayWidth = textDisplay.getBoundingClientRect().width;
		console.log(textDisplayWidth);
		 
	textDisplay.innerHTML = myText;
   
  	hypeDocument.setElementProperty(textDisplay, 'left',  ((currentWidth/ 2 ) - (textDisplayWidth / 2 )));

textCenterCSS_scaling.zip (16.1 KB)

6

Change the code to

    var myText 				= 'Bosnien und Herzegowina Herzegowina';
    
    var scaleWrapper 		= document.querySelector ('.scaleWrapper');
 	var textDisplay 		= document.querySelector ('.textDisplay');
	  
	textDisplay.innerHTML	= myText;
  	
  	var  textDisplayWidth	= textDisplay.offsetWidth;
	var currentWidth		= scaleWrapper.offsetWidth;
		 
		 
  	hypeDocument.setElementProperty(textDisplay, 'left',  ((currentWidth/ 2 ) - (textDisplayWidth / 2 )));

Seems when using scale and the group div ( scaleWrapper) the widths are not registered correctly when the text has changed. So the solution is to get the widths after the text change

Probably how I should have set it out any way.

3 Likes
7

Super Mark, works perfectly. I think I definitely need to take lessons in these things. :grinning: Thanks a lot!

1 Like