I need some HTML/CSS guidance. My goal is to create a contacts list screen in my app, and like most contacts list screens, users should be able to pick a letter the name starts with, and the app will filter to that letter. Easy enough.
How I'd like the UI to look is something like this:
Find by Name | all # a b c d e f g h i j k l m n o p q r s t u v w x y z
Where everything to the right of the | is a clickable link.
My problem is that I've got a dynamic width UI, and I'd like the bar to take up the whole width of the users browser even as they resize--so the letter z should be on the far right end. I'd like for there to be even spacing between the letters.
The "Find by Name" text can in another module could read: "Find by Street Name", so that isn't fixed width either.
How is this best accomplished in css/html? If it matters, i'm not using a fixed width font.
Put each letter in an element with a width of 3.8% (100/26).
The drawback to that is you'll run into some odd rounding issues in some browsers.
Personally, I wouldn't try to make them span the entire width. The way you have now seems to be visually proper.
Related
is there a thing to order words by their pixel width? I know fonts are different but it's for Twitter. What I mean is:
a
iiii
aa
llllll
aaa
aAa
WW
aaaa
Because that, by character number count length, is not like a half pyramid. A way to arrange them from shortest to longest no matter how many letters they have, but how long the entire word is by looking at the last pixel of the font.
Answering your question, YES, there is a way to achieve what you want.
So basically what you need is:
Convert every line of text to an image
Measure widths of all the images and store the results in an array
Order the array
Print the text according to the order in the array
The programming would be easier if it is done on a server-side language but you could do it in Java or C
I'm trying to make a hotkey type button which has a main image, a number in the top left indicating the hotkey button, and a number in the bottom right indicating the quantity of the item. I could use a Table to place these but they wouldn't be overlapping. I'd like to have the numbers on top of the main image so I used a stack, unfortunately it doesn't look like there's a way to control the actors on a stack - they all get placed at 0,0 within the biggest actor in the stack. Is there a way to place the actors in the appropriate positions or do I have to use table?
By definition, Stack puts its children in 0,0 coordinates and trying to stretch them to fill Stack.
You can use Group, for more control over actors you putting in:
You can simply get X and Y coordinates of inserted Actor by getX() and getY() methods. With little bit of help by getHeight() and getWidth() methods you can make simple table layout.
I'm building an HTML webpage that contains the following content:
In order to proceed, please enter this code: GJBQTCXU
"GJBQTCXU" is a code comprised of a string of letters; however, screen readers attempt to pronounce this as a single word. How can I stop them from attempting to pronounce this nonsensical word and instead get it to read one letter at a time: "G J B Q T C X U".
As clarification, I'm building this page so that screen readers automatically do the right thing. I know that users can choose to have their reader pronounce each letter at a time, but I don't want my users to have to take any additional steps.
try using CSS letter-spacing property -
<div>G J B Q T C X U</div>
div {
letter-spacing:-1.9px;
}
example:
http://codepen.io/stevef/pen/grZGBP
There are many screen readers and those readers can also be inconsistent between browsers due to accessibility APIs differences.
With that said here is a good generalization of functionality from WebAIM http://webaim.org/techniques/screenreader/
They note that some screen readers by default won't read punctuation like periods, semi-colons, etc. but rather pause between them. You could try visually hidden versions of these. Now if they have more verbose settings turned on it might read those.
Another reading aspect mentioned is that some screen readers pause at the end of a paragraph. So if you wrapped each letter in a p tag and then made them display inline, there could be pauses.
Since nuances aren't as well documented between the screen readers between browsers it's hard to say either will work in your instance.
Since users can just use left/right arrow keys to read individual letters it wouldn't take much for regular screen reader users to read the word slowly.
I would say the punctuation is more dangerous if their verbosity settings are set high. So try the paragraph tag approach first. Since users can also jump between paragraph tags with screen readers there might be some confusion but it seems like the lesser of the two.
I feel like the real answer to this is:
<div aria-label="G J B Q T C X U">GJBQTCXU</div>
simplified, i have three elements A, B and C. B and C are together in a div. if there is enough horizontal space (browser window wide enough) i want them displayed as
A B C
trivial so far. if the window gets smaller, i want them to wrap like this:
A
B C
i solved this by giving the div a style.whiteSpace = "nowrap".
the problem is, that B C now simply wont wrap any more, even if there is not enough space to display them. when the window gets even smaller, i want this to be displayed as
A
B
C
so what i am looking for is kind of a softer version of 'nowrap' which prevents wrapping if there is room to evade to, but allows wrapping if not.
EDIT:
a reply solved the above by making everything float: http://jsfiddle.net/nF4k5/6/
this made me realize that my simplification went too far. actually in my application A is a text and has wrapping in itself, so will sometimes fill the whole width. B and C can be imagined as single words that should appear
a) together in the last line of text A or if they wont fit there together
b) on a new line or if that line is too short
c) on two lines.
i made an example to play around with: http://jsfiddle.net/nF4k5/5/
ever smaller screens should result in:
A A A A B C
A A A A
B C
A A A
A B C
A A
A A
B C
A
A
A
A
B
C
it would be especially nice if the solution didnt involve making changes to A, like my adding of nowrap to the div around B C, which doesnt work.
EDIT:
solution: instead of giving the wrapper of B and C a whiteSpace="nowrap" i give it a display="inline-block".
put A in div X , B and C in Y. Float X and Y to left.
Whenever width is smaller than width of X+Y, Y will go down.
Inside Y : put B in div sonOfX, put C in sonOfY, Float sonOfX and sonOfY to left.
Whenever width is smaller than width of sonOfX+sonOfY , sonOfY will go down.
here you go - http://jsfiddle.net/nF4k5/
This should do it: http://jsfiddle.net/nF4k5/7/ for your new question
Since you said these are elements, I'm assuming you mean HTML elements, right? If that's the case, just float them. That's the natural behavior of floats.
I have an HTML table (populated from a datatable on server side), with no styling except background color, and for some reason it breaks some of the lines.
Is there any CSS behavior that dictates this? I tried to replicate it with a table populated with a random string of "M "s, and it also broke the line after every space...
EDIT:
What's happening:
|M|M|
|M|M|
|M|M|
What's supposed to happen:
|M M M |M M M |
Thanks!
I think you mean the NOWRAP option.
<table><tr><td NOWRAP>Text</td></tr></table>