Page title CSS style - css

Is it possible to change title font style?
I want to have my page title with font-variant: small-caps;

No we cant style it. For some information you can read W3C documentation about the title tag. It says:
The title is not part of the text of the document, but is a property
of the whole document. It may not contain anchors, paragraph marks, or
highlighting. The title may be used to identify the node in a history
list, to label the window displaying the node, etc. It is not normally
displayed in the text of a document itself. Contrast titles with
headings . The title should ideally be less than 64 characters in
length. That is, many applications will display document titles in
window titles, menus, etc where there is only limited room. Whilst
there is no limit on the length of a title (as it may be automatically
generated from other data), information providers are warned that it
may be truncated if long.

Related

QML TextArea colored text with selection

i am trying to accomplish the following behavior with a QML TextArea:
I want single Words in the Text to be colored differently
I want the "select"-functions to be working for automated scrolling (user interaction is disabled)
There is a stream of text in the TextArea where one Word needs to be selected(highlighted). The user is requested to input some text elsewhere and press enter to proceed (not part of the question). After that the selection jumps to the next word and the last selected word is either colored green or red. There is only a small portion of the text visible (a few lines, managed by the TextArea height – not part of the question) and i need the text to scroll if the next word is out of that visible range .. therefore the selection is quite helpful because all interaction from the user – to scroll or select or whatever – is disabled (disabling is not part of the question)
my main problem is: if i use textFormat: TextEdit.RichText i can easily color the text how i like it to be (<font color=\"green\">{}</font>) but i cannot use the "select"-functions anymore because – as i would guess – the selection works on the "plaintext" and cannot correspond to the "richtext"-selection? Anyway selectWord() etc. does not work QTextCursor::setPosition: Position '-1' out of range is the result. But if i disable the RichText i don't know how to color the text. Maybe i could live without the selection if i could detect the current word – which would be colored blue etc. – and scroll if its out of the visible area to "fake" the selection behavior, but that's just a third option.
I would really either know how to color non-Rich Text or how to select Rich Text in a TextArea.
You can use QSyntaxHighlighter to highlight the words independent of the selection. See QQuickTextDocument and How to implement rich text logic on QML TextEdit with QSyntaxHighlighter class in Qt for more details.

How do I instruct screen readers to skip a SVG chart (axis labels) and read the associated table instead?

I have a SVG chart and a table, both displaying the same data. When testing with JAWS, I noticed that I reads all of the text labels on the X and Y axis before reading the content of the table. I tried adding a aria-describedby="id-of-table" to the chart, but that just made it worse: now JAWS still reads all of the Labels, but it also says "Use JAWS key+Alt+R to read descriptive text" after every single label.
What is the correct way to tell Jaws and other screen readers to completely skip this section because it doesn't apply, similar to alt="" on a decorative image?
Update: here's an example http://jsbin.com/wujuqaliqa/2/edit?output with the aria-hidden attribute applied to the chart.
Set aria-hidden="true" on the containing element that you do not want read, or on each element you do not want read if there is no common container. Be careful not to put this on a tab-focusable element such as a button or a link because these will still be tab-focusable and will behave differently depending on the browser/AT combination.
If you add example code or link to a fiddle, I will be able to show you exactly how to get it done.

Flex wordwrap issue with multiple text instances

I have a scenario where I want to dynamically add words of text to a container so that it forms a paragraph of text which is wrapped neatly according to the size of the parent container. Each text element will have differing formatting, and will have differing user interaction options. For example, imagine the text " has just spoken out about ". Each word will be added to the container one at a time, at run time. The username in this case would be bold, and if clicked on will trigger an event. Same with the news article. The rest of the text is just plain text which, when clicked on, would do nothing.
Now, I'm using Flex 3 so I don't have access to the fancy new text formatting tools. I've implemented a solution where the words are plotted onto a canvas, but this means that the words are wrapped at a particular y position (an arbitrary value I've chosen). When the container is resized, the words still wrap at that position which leaves lots of space.
I thought about adding each text element to an Array Collection and using this as a datasource for a Tile List, but Tile Lists don't support variable column widths (in my limited knowledge) so each word would use the same amount of space which isn't ideal.
Does anyone know how I can plot words onto a container so that I can retain formatting, events and word wrapping at paragraph level, even if the container is resized?
Why aren't you just using a mx:Text component and html text (you can call functions from htmlText), and apply different formatting using html tags.
For information on how to trigger a function from a htmlText field:
http://www.adobepress.com/articles/article.asp?p=1019620

Custom bullet points using Flex

Any idea how I can draw Bullet Points using Flex? instead of using image for 1, 2 and 3?
alt text http://www.freeimagehosting.net/uploads/9bb3213a63.jpg
Regards, PK
You could make a custom component for the bullet that has an image with a label over top of it. Then all you need to do is set the label text (to 1, 2, or 3).
Alternatively, take this a step further and make a custom component for a 'bullet item' that would contain an image with a label over top (for the bullet) with a second label on the right (for the item text).
Either would allow you to create your bullet list with using a series of different images for your bullet items.
The reverse-type enclosed numbers are part of Unicode, so if you embed a font in your Flex app that includes these characters, you should be able to do this with any of the regular text components. You can either embed the entire font, or just be sure you select the needed subranges including the extra number characters you need.
1 thru 10 are in the Dingbats section, from U+2776 to U+277F in a heavy serif font, and from U+278A to U+2793 in what looks to be Helvetica. Because these are considered dingbats, I would expect the forms of these characters to look like what you see in the PDF, rather than using the letter forms of the regular digits in your chosen font. If so, just choose the range that complements your main text font best.
Then off in the Enclosed Alphanumerics section, you have 0 and 11 thru 20 in still another font, a lighter serif font than used for 1-10 in the Dingbats section. Because these are just supposed to be enclosed versions of regular numbers and letters for the font, it's possible they will match the main text font rather than what you see in that PDF.
Bottom line, it might be worth investigating several fonts to find one that lets you mix and match all the pieces you need and still look good.

How to decide What should be chosen to make heading bold <strong> or <h3/h4/h5>?

How to judge what should be <h2> , h3 h4 h5 h6 or <p><strong>Some text</strong></p> If we don't have knowledge about context
Only title of the page i can judge easily <h1>
How to judge others I always get content from clients in MS word 2007 format and client always use fontsize to make things smaller and bigger.
How we can best judge where client want Headings level and where he used bold text only for styling and where He really want to give emphasize on text.
<p><strong>Some text here</strong></p>
<p>Some more text here Some more text hereSome more text here
Some more text hereSome more text here Some more text here
</p>
Or any heading level
<H*>Enquiries to:</h*>
<p>Some more text here Some more text hereSome more text here
Some more text hereSome more text here Some more text here
</p>
Which would be good for accessibility?
Heading are what their name suggests, they should be used for headings or titles. Heading make them bold as well as different sizes based on their level. For other piece of text, you have to decide whether you want to make it bold or not.
Also, heading tags are good for search-engine-optimization, the SEOs usually put the page titles or important keywords inside these heading tags.
If you simply want something to appear bold, use the <strong> tags instead.
What i would suggest you is:
You should use headings for the titles or important keywords for the SEO purpose and you should use the other bold type tags such as b or strong at your own will when you want to make something appear bold.
Example:
<H2>Amazing Laptops</h2>
<p>
We deal in great <strong>quality laptops</strong> you will ever come across.
</p>
Bottom Line:
There is a world of difference between bold type tags such as strong and heading tags. They serve the different purpose, you can not compare them.
If the "some text here" sums up the section(s) or paragraph(s) that come directly after it, then it can be considered a header. Otherwise, it's just another piece of text.
Another good rule of thumb is that headers should not contain colons. So:
<h1>Inquiries</h1>
<p>Please send your inquiries to blabla.</p>
But:
<p><strong>Send your inquiries to:</strong><br />
blabla</p>
I would say don't worry about the formatting to decide which heading to use, you can always adjust the look with CSS.
My rule of thumb is to think of what you would want to see in a well organized and hierarchical table of content. If you would want the text in it then use a H[123456] tag. Then the more prominent use closer to H1, less prominent use closer to H6. Use the same Hn for things that are at the same level of importance.
It does not matter if you don't have a TOC in the end, but that will help you think how to organize your headings.
Unfortunately there is no definitive formula for whether some piece of text should be a heading or not. If you don't understand what your client is looking for, I suggest you ask the client. We have even less idea since we haven't seen the data.
It's pretty common anymore to actually just use the header tags as placeholders really, and define adjust the design via CSS. Also
I think as far as you're question, you kind of just use them as they are in a hierarchical order based on what you can assume. Like you said page header would make sense to use <h1>, section header maybe <h2> and so on, and as adjustments need to be made just alter they're font size with CSS.
.content_area h1{font-size:18px;font-weight:bold;}
.content_area h2{font-size:14px;font-weight:bold;}
etc...

Resources