I have a select tag with a lot of options. Every option has a name and a date which both should be printed in every <option>.
I want to align the list like this:
Name Date
Name Date
Name Date
Since every name has different length, I wrote this code:
//Start of the option text//
//Always print 20 characters, even if the name is longer//
print ">".substr($eventsArr[$j]->GetName(),0 ,20);
//If the name is shorter then 20 chars//
if(strlen($eventsArr[$j]->GetName()) < 20)
{
//Add missing chars (20 - the length of the string) with spaces//
for($t = 0; $t < 20 - (strlen($eventsArr[$j]->GetName())); $t++)
{
print " ";
}
}
print "" .$newDate."</option>\n"; //Then print the date//
I'm getting the correct amount of spaces completed. But as you can see, the alignment is not 100%:
I'm guessing its because every letter has a different width in pixels. So... Is there any way of doing this kind of alignment ? Thanks.
Just use a Monospaced font for this. It's what they were designed for.
Option elements were not meant to be formatted that way. Using a monospace font would be the way to achieve alignment, but that would make the text look ugly, and monospace fonts are less readable, too. Moreover, not all browsers honor font family settings for option elements; for example, IE 9 does not.
The workaround, or alternative approach, is to use a set of radio buttons instead of a select element. Then you can use a table:
<table>
<tr><td><input type=radio id=a1> <label for=a1>Name</label>
<td>Date
...
</table>
This handles the alignment, and this also lets you specify the font used for the labels in a manner that works across browsers.
If there is a large number of alternatives, you might consider setting a height and vertical scrolling for the table. But it might be better to let users just scroll down the page as needed, instead of having two levels of scrolling.
Related
I'm formatting fraction with MathJax and are having problem displaying it properly.
$disp = '<h1>$${{10 \over 9 }} of 99 $$</h1><br>';
echo $disp;
For some reason, i cannot get a space before and after the word 'of'. Any pointers is greatly appreciated. Thanx in advance.
This is better handled as
$disp = '<h1>$${10 \over 9}\text{ of }99$$</h1><br>';
as the accepted answer does not get the font or spacing for "of" correct.
It also seems that you may be using <H1> simply to get a larger size. If so, that is bad practice, as <H1> is a structural element indicating a top-level heading (not a layout element for a larger size). Unless this expression really is a top-level heading, you should not use <H1> for it. For example, people using assistive technology like screen readers often are given a list of the headings so they can quickly jump to the important starting points of your page, so if you make all your expressions be headings, that will complicate their already difficult task of navigating your page.
Layout should be controlled by CSS, so you could use a <div> with a class around your display math if you want to size it. Or you could use one of the TeX macros like \Large or \LARGE to make the math larger from within the expression. But don't use a heading indicator unless it really is the start of a new section of your page.
Here are some examples:
.dmath {
font-size: 200%;
}
<script src="https://cdn.jsdelivr.net/npm/mathjax#3/es5/tex-chtml.js"></script>
Bad:
<h1>$${10 \over 9} of 9$$</h1>
Better using CSS and <code>\text{}</code>:
<div class="dmath">
$${10 \over 9}\text{ of }9$$
</div>
Better using <code>\LARGE</code> and <code>\text{}</code>:
$$\LARGE {10 \over 9}\text{ of }9$$
<br><br><br><br>
Usually, \ keep the space between letters.
$disp = '<h1>$${{10 \over 9 }}\ of\ 99 $$</h1><br>';
Reference - Spacing in math mode
i need to show one row's words vertically, for that i've created a class in my stylesheet containing text-orientation:sideways then applied it on the tr , but it won't seem to work, i'm a bit new to CSS so maybe someone could help please
this it the table row
echo "<tr class='vert'>";
and this is the stylesheet
table tr.vert{
text-orientation: sideways;
}
You seem to be missing the writing-mode property..
The text-orientation CSS property sets the orientation of the text characters in a line. It only affects text in vertical mode (when writing-mode is not horizontal-tb). It is useful for controlling the display of languages that use vertical script, and also for making vertical table headers.
MDN
span {
writing-mode: vertical-rl;
text-orientation:sideways;
}
<span>Writing Mode</span>
I am building a wordpress plugin which is generating an HTML table and sending to gravityforms html block via shortcode.
My problem is that cell contents can contain:
23.24
1,234.665
123.4
etc...
Notice the differing number of decimal places.
Is there a non-hack & best practice way of aligning this column data by decimal point? In this case, Aligning right will not work.
Inserting 0s is not acceptable because this indicates a degree of accuracy which is not there.
As you can see, I have attempted to use align="char" char="." inside the td elements with no luck.
Any help anybody can help with this would be much appreciated.
Many thanks.
Is there a way of using printf("%8.3f",d1) or similar without actually printing to the screen? e.g. structuring the variable d1 for later use but not actually printing it?
There is no direct way to do this. HTML 4.01 has align=char, but without any browser support. CSS 2.0 had a counterpart, using the text-align property, with equal lack of support, so it was dropped from CSS 2.1. CSS3 drafts have a nice system for such alignment, but indicated as being in danger of being cut from the spec if there are no (correct) implementations.
As a workaround, you could right-pad the values with something invisible (blank) so that when the values aligned to the right, the decimal markers get aligned. There are several ways to try to achieve this:
1) Use digit 0 but set a style on it, making it invisible, e.g.
123.4<span class=s>00</span>
with
.s { visibility: hidden; }
2) Use FIGURE SPACE U+2007, defined to have the same width as digits (when digits are of equal width), e.g.
123.4
For this to work, you need to set the font so that it contains U+2007. According to http://www.fileformat.info/info/unicode/char/2007/fontsupport.htm even Arial contains it, but I’m afraid this might not apply to old versions of Arial still in use.
3) Use a no-break space and set its width to the desired number of digits, using the ch unit (define to have the width of digit 0), though this unit is relatively new and not supported by old browsers. Example:
123.4<span class=d2> </span>
with
.d2 { width: 2ch; display: inline-block; }
I would probably use the first method. As a matter of principle, it has the drawback that when CSS is off, the data contains zeroes, which imply wrong information about accuracy, whereas in other methods, switching CSS off “only” messes up the layout.
(It’s probably obvious that digits must be of equal advance width, so that you can align numeric data at all. This just means that the font used for the values must have that property. Most fonts will do in this respect, but e.g. Georgia, Constantia, and Corbel won’t.)
I wrote a jQuery plugin that solves this. It's found here: https://github.com/ndp/align-column
Using your raw HTML table, it will align a column by decimal points:
$('table').alignColumn(3);
It does this by adding another column, but does its best to not corrupt the other spacing. There's also a reference to a different solution on the Github page.
Would it be acceptable to put the value into two columns?
Use sprintf() to convert the value into a string, and then put the bits up to the decimal point in the left column (but right aligned), and the decimal places in the second column.
See http://jsfiddle.net/alnitak/p4BhB/, but ignore the JS bit...
The thing is, you've gotta ensure that they all have the same number of digits after the decimal.
Once you do that, use text-align. All it will take is a: style='text-align: right'
Better still, you could use a css class instead of inline styles. Your markup would look like this:
<tr><td>Item 1</td><td>15</td><td class='price'>£123.25</td></tr>
Then in your stylesheet:
td.price{
text-align: right;
}
With php, you can format a number as a string with number_format. You don't have to echo it or print it, just wrap your variable in that function. For example:
$table .= "<td class='price'>£" . $price . "</td></tr>";
becomes:
$table .= "<td class='price'>£" . number_format($price,3) . "</td></tr>";
It might be overkill but I needed the same thing and just solved with a length of the output and adding whitespace based on that length.
I.e.:
if (strlen($meal_retail) == 5) {
echo " ";
}
else (strlen($meal_retail) == 6) {
echo " ";
}
This lined up my decimals correctly with a bit of extra doing, and i'm sure an array could clean the above code up even nicer.
Additionally, i've been conforming my numbers adjusting with:
echo money_format('%i',$meal_retail) (makes it a two decimal money number)
Just wanted to provide my solution as I was looking at this page before coming up with my own resolution.
this is my solution, hope it help!!
<style type="text/css">
td{
font-family: arial;
}
.f{
width: 10px;
color: white;
-moz-user-select: none;
}
</style>
<table>
<tr><td><span class="f">00</span>1.1<span class="f">00</span></td></tr>
<tr><td><span class="f">0</span>12.34<span class="f">0</span></td></tr>
<tr><td>123.456</td></tr>
</table>
with this, you can't see the zeros and can't select them!
I have used javascript for this, I hope this will help.......
</tr>
</table>
</body>
for(var i=0; i<numarray.length; i++){
var n = numarray[i].toString();
var res= n.split(".");
n = res[0];
if(highetlen < n.length){
highetlen = n.length;
}
}
for(var j=0; j<numarray.length; j++){
var s = numarray[j].toString();
var res= s.split(".");
s = res[0];
if(highetlen > s.length){
var finallevel = highetlen - s.length;
var finalhigh = "";
for(k=0;k<finallevel;k++){
finalhigh = finalhigh+ ' ';
}
numarray[j] = finalhigh + numarray[j];
}
var nadiss = document.getElementById("nadis");
nadiss.innerHTML += "<tr><td>" + numarray[j] + "</td></tr>";
}
Below is a preview of what I am dealing with:
The heading, the text, and the image is all dynamically created based on the user. They can choose if they want to add a picture, and they can choose what text to put in the heading and the main content.
There cannot be any scrolling, so it has to be visible and cannot go past the bottom of that white.
My question is... how can I limit the text of the body?
If the heading is large and goes down to two lines, and there is a picture, then in order to stay in the lines and not go past the white it has to be limited to a certain amount of characters.
But another user could decide to not have a picture and keep the heading in one line, so that user will have more text to write so the limit should be different.
I guess the confusing part for me is like.. what if a user has no picture and has a short heading, and creates some really long text to fit the size, but then later on decides to add an image.. then that long text will now no longer fit. So now.. I can't limit the text because it's already there.
I hope that makes sense. If anyone could help me through this and give me some ideas I would really appreciate it.
Use this for whatever the user input is for adding text. It could limit the characters they use just change the 250 value.
<script>
function countChar(val){
var len = val.value.length;
if (len >= 250) {
val.value = val.value.substring(0, 250);
}else {
$('#charNum').text(250 - len);
}
};
</script
<textarea id="field" name="description" onKeyUp="countChar(this)"></textarea>
its not only the text you need to limit but also the image thumbnail so that affect the style of your webpage
To limit the number of string .. i would you use a script form here php trim a string
function trim_word($str, $length, $suffix = '...')
{
$len = strlen($str);
if ($len < $length) return $str;
$pattern = sprintf('/^(.{%d,}?)\b.*$/', $length);
$str = preg_replace($pattern, '$1', $str);
$str = trim($str);
$str .= $suffix;
return $str;
}
it trim the text and makes sure it always ends with a word ...
You can use http://phpthumb.sourceforge.net/ to generate thumbnail of fixed size all you need to do it set your desired height and width
There are a few different options to consider. You may want to limit the amount of text the user can enter for starters, to ensure it doesn't overflow.
One thing I would probably do is find the maximum amount of characters you're comfortable with on the page, and use substr on the output from the database to ensure that it never displays more.
http://php.net/manual/en/function.substr.php
You could have a "more" link that way the visitor could read more if they want, but it doesn't break the layout. I would use basic if statements for the logic (if picture exists, trim text to this, if not etc).
Hope that helps.
Surround the entire thing with a container div of the fixed height which you desire with no padding, and inside that place another inner div with no margin and no fixed height, then as the user changes the content create a javascript function to check if the inner div is < the container div; and if not then do not allow the user to make that change - this way you are attacking the problem directly.
<script>
function checkDivs() {
if(inner.style.height >= container.style.height) {
//prevent change
}
}
</script>
<div id='container'>
<div id='inner'>
//User-defined content
</div>
</div>
This function would be attached to whatever GUI the user would edit the content through, as for how to prevent the change, I'd have to know more about your program.
I have three div's which are being filled with dynamic text from a database. The div #container is a fixed height and width where the text inside wraps. The three divs are different font sizes. Any of the three div's could have enough text to exceed the container size. I need to determine if the text exceeds the container size and at which letter in which div it occurs. The extraneous text will then be wrapped in something like <span class=hide">text here</span>
<div id="container">
<div id="first"><?php echo $arr['first'] ?></div>
<div id="mid"><?php echo $arr['mid'] ?></div>
<div id="last"><?php echo $arr['last'] ?></div>
</div>
I'm thinking this is impossible to do in PHP as the styling is done client side. Maybe there is a way to fake it? Though that could get ugly really fast.
I'm trying really hard not to do it in javascript because this calculation will be done about 10 times per page viewed. Please don't tell me it's impossible to do in PHP, there's always a way.
Any ideas?
Just in case you decide that client-side makes more sense for you I put together a fiddle. I realize you want to avoid client-side, but you mentioned this would be happening ten times which honestly is very little these days with how much js speed has increased in browsers. It is also a much simpler problem client side.
http://jsfiddle.net/JSRtk/
Basically you detect if the container is overflown. If so you display a 'read more' button. When clicked it will expand the container to show all text and go away.
$('#container > div').each( function() {
if (checkOverflow(this)) {
console.log('overflow detected in ' + $(this).attr('id'));
$(this).after('<p>Read more...</p>');
}
});
$('p').live('click', function() {
$(this).prev('div').css('height', 'auto');
$(this).hide();
});
function checkOverflow(el)
{
var curOverflow = el.style.overflow;
if ( !curOverflow || curOverflow === "visible" )
el.style.overflow = "hidden";
var isOverflowing = el.clientWidth < el.scrollWidth
|| el.clientHeight < el.scrollHeight;
el.style.overflow = curOverflow;
return isOverflowing;
}
Do you have to wrap it in a span for a purpose (i.e. crawlers/seo)? If not you could either set the CSS on the div with a fixed width to have overflow hidden, alternatively, you could figure out how many characters roughly fit in that width (count them) then use strlen() and substr() like so
<?php
$string = "This is a string thats too long to fit";
if(strlen($string) > 20)
echo substr($string,0,20);
else
echo $string;
?>
There is no way for you to calculate the size of a display element in PHP since it is run on the server and not on the client, and it's the client that renders the HTML.
If you have the same container size every time and the same font and font size and styles and everything, you could probably estimate a number of character and cut it off in PHP at that number of characters using substr. But even then, unless you build a table of character sizes or use a monospaced font, there is no way to reliably do what you want.