Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

left justify and right justify one element content in css

I have an HTML code on inspect (as shown below) in which I want to left justify and right justify time element content in css.

HTML Code (On inspect):

<time datetime="00:15 02-08-2019" style="width:194px;" 
data-timezone="et">August 2 &nbsp;  &nbsp; 00:15</time>

The above inspect is generated from the following php code:

Php code:

<time style="width:194px;" datetime="<?php echo esc_attr(date_format($ts, 'H:i d-m-Y')) 
?>"data-timezone="<?php echo esc_attr($tz_param) ?>"><?php 
echo ucfirst(date_i18n( 'j F &\nb\sp; &\nb\sp; H:i', 
$ts->getTimeStamp()-(60*60*4))); ?></time>`


The above inspect html code belongs to the following screenshot:

enter image description here

Problem Statement:

I am wondering what CSS code I need to add so that I can left justify August 2 (which is already there) and right justify 00:15.

like image 591
flash Avatar asked Aug 02 '19 15:08

flash


Video Answer


1 Answers

New answer

based on your new update and since you have control over the PHP code, you can simply split the date like below:

<time style="width:194px;" datetime="<?php echo esc_attr(date_format($ts, 'H:i d-m-Y')) 
?>"data-timezone="<?php echo esc_attr($tz_param) ?>"><?php 
echo ucfirst(date_i18n( 'j F', 
$ts->getTimeStamp()-(60*60*4))).'<span>'.date_i18n( 'H:i', 
$ts->getTimeStamp()-(60*60*4)).'</span>'; ?></time>`

And this will produce the following output:

time {
 display:inline-block;
}
time span {
  float:right;
}
<time datetime="00:15 02-08-2019" style="width:194px;" data-timezone="et">August 2<span>00:15</span></time>

Old answer

You can simulate this using word-spacing but you need to insert a special space between august and 2 called a fixed width space that doesn't get affected by word-spacing

time {
 border:1px solid;
 display:block;
 width:300px;
 word-spacing:190px;
}
<time datetime="00:15 02-08-2019"  data-timezone="et">August 2 00:15</time>
<time datetime="00:15 02-08-2019"  data-timezone="et">August&#x2002;2 00:15</time>

Word spacing algorithms are user agent-dependent. Word spacing is also influenced by justification (see the 'text-align' property). Word spacing affects each space (U+0020) and non-breaking space (U+00A0), left in the text after the white space processing rules have been applied. The effect of the property on other word-separator characters is undefined. However general punctuation, characters with zero advance width (such as the zero with space U+200B) and fixed-width spaces (such as U+3000 and U+2000 through U+200A) are not affected. ref

List of the spaces: http://jkorpela.fi/chars/spaces.html

like image 59
Temani Afif Avatar answered Oct 19 '22 02:10

Temani Afif