we have a pretty complex HTML application which also supports RTL.
However when switching the HTML to RTL by using the <html dir='rtl'> attribute not everything is reversed.
Especially elements that were aligned previously by CSS do NOT reverse.
Simple example:
<!DOCTYPE html>
<html>
<head></head>
<body>
<table>
<tr><td>Some text long text</td><td>Even More long text</td></tr>
<tr><td style='text-align:right;'>aligned to right</td><td>aligned to left</td></tr>
</table>
</body>
</html>
When setting
<html dir='rtl>
on this example I would expect the text-align to switch direction, too. But it doesn't. For this reason we currently load a 2nd template CSS file after the default one that overwrites the necessary alignments. I feel that this is not optimal.
Is there is easier way to reverse/flip alignment stuff for RTL?
You want something like this
html[dir="rtl"]
Example : http://jsfiddle.net/3UsyS/
Related
I'm trying to add the Arabic language to my paragraphs but it appears from left to right. I tried <HTML lang="ara"> and I tried to do it from .css file, but nothing worked with me.
note I'm using react and I just create the folder without changing anything and the first thing I did is to add the following paragraph.
<p lang="ara" dir='rtl' className='title-field' contentEditable />
the html-tag gets the direction-attribute
<html dir="rtl">
<body>
<p>aligned right</p>
</body>
</html>
You can also style specific elements with the direction property:
direction: rtl;
This seems to work fine, run the code snippet to see
<p lang="ara" dir='rtl' className='title-field'> نص الاختبار</p>
Is the following W3C Compliant:
<div>
<h3>Heading</h3>
This is the text for this section.
</div>
Or does the text require a container element?
<div>
<h3>Heading</h3>
<p>This is the text for this section.</p>
</div>
The first example doesn't sit right with me, but a content editor asked me and I realized I don't really know if it's okay.
Both examples are valid.
Technically in the first one, the text is inside a container, the outer <div>.
Anyway it is perfectly valid to put text directly inside the <body>, which means the following HTML document will pass validation with no errors or warnings:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h3>Heading</h3>
This is the text for this section.
</body>
</html>
The more relevant question is whether it is semantically correct. To put it simply, paragraph text should be surronded by a <p> tag. More generally each type of content SHOULD be written inside the semantically relevant tag.
I will advise you to use the second approach.
When you use the correct Heading Tag it helps boost your page SEO wise.
Moreover, paragraph tag, P, helps some browser to render your page in “reading mode”.
Finally, a div is a block-displayed element. This CSS code looks a bit weird: div {color: blue}. But, p { color: red; } make more sense for a lot people.
Technically, both are conforming HTML (unless you validate it against the strict HTML4.x/XHTML1.x scheme which has no connection to reality anymore). Hovewer, the second approach would be probably more convenient from the styling/scripting perspective, where it's always better to have a possibility to address any piece of content directly. The first example has an implicit paragraph, and explicit is usually better than implicit.
I have a table that is being generated where one of the columns needs its text to be aligned right. So right it looks something like this:
<td class="generatedClass" id="generatedId" style="width:20px; text-align:right;">
<label id="generatedRowId"> some text here </label>
</td>
It works in IE9 and IE8, but for some reason not IE7. Anyone have an idea as to why this might not be working? To note, the inline styles are being created as json objects. I don't like having inline styles, but it wasn't my call.
Your code looks like it should work. Probably, IE7 is not updating the DOM after these inline styles are being applied.
I recommend opening the page in IE10 and then going to IE7 Page mode. You should then be able to inspect the styles on your element and find out if they're being applied, overridden, etc.
Its seems like width property of your inline style casing problem in IE7. Try to eliminate to apply with in inline style.
<html>
<head>
<title></title>
</head>
<body>
<table width="400">
<tr>
<td class="generatedClass" id="generatedId" style="text-align:right;">
<label id="generatedRowId"> some text here </label>
</td>
</tr>
</table>
</body>
</html>
I have tried and isolated the problem below after spending hours on this. First link is not underlined on hover in FF but works in all the other browsers I have tried. The second link properly works in Firefox too. Most of the existing html on the site is structured in the below way so a site wide fix will be appreciated.
HTML: (pasting as code here removes tags) http://pastebin.com/duqfKGeY
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
FF test
</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link href="ff.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table>
<tbody>
<tr>
<td>
<ul type="disc">
<li>
<a target="_blank" href="http://example1.com">
<font size="2" color="#b80000"><b>Example Link 1</b></font></a>
<br>
<font size="2" face="Verdana">
example text example text example text example text example text example text example text example text example text example text example text example text example text example text example text example text example text
<a target="_blank" href="http://example2.com/">
<font size="2" face="Verdana" color="#b80000">Example link 2</font>
</a>
example text example text example text example text example text example text example text example text example text example text example text example text example text example text example text example text example text .
</font>
</li>
</ul>
</td>
</tr>
</tbody>
</table>
</body>
</html>
CSS:
a{color:#b80000;}
a:link{color:#b80000;text-decoration:none;}
a:visited{color:#b80000;text-decoration:none;}
a:hover{color:#b80000;text-decoration:underline;}
a:active{color:#b80000;}
Edit: Validates without any errors on W3C Validator
The <B> tag is overriding the text-decoration. Just add this:
a:hover b{text-decoration:underline;}
If there are others you could probably even do:
a:hover > *{text-decoration:underline;}
This is all a bit over kill I would just use:
a{text-decoration:none;}
a:hover{text-decoration:underline;}
There should be no reason why this doesn't work.
Okay first things first,
Tables for layout - educate yourself please:
http://shouldiusetablesforlayout.com
http://www.hotdesign.com/seybold/
http://webdesign.about.com/od/layout/a/aa111102a.htm
http://www.htmlgoodies.com/beyond/css/article.php/3642151/CSS-Layouts-Without-Tables.htm
<font> tags were deprecated LONG ago, we now use CSS and <span> tags for all our styling needs.
The most likely reason why stuff doesn't work is because your HTML is basically completely wrong, yes it works but it is killing the interwebz - Here is your layout redone with <div> tags and CSS - nice and clean and everyone is happy:
Live Demo
Also - validation - It is just a tool, not a standard to aspire to, sure it helps fish out bugs but it could end up causing you hassle trying to be 100% compliant (Stares at XHTML Strict) more on that here:
http://net.tutsplus.com/articles/general/but-it-doesnt-validate/
I see the :hover underline on both links in FF 3.6/Mac, even when they are visited links.
As Alex Thomas pointed out, your CSS can be more concise--consider that all the link states are the same color, and only the :hover state differs by having an underline.
Even though the crummy HTML from Google Docs has the color stated on those font tags (retro, eh?), duplicate the color rule in your CSS so the :hover underline appears in the correct color:
a {
color: #b80000;
text-decoration:none;
}
a:hover{ text-decoration:underline;}
The problem may be with the text-decoration: underline; CSS statement. Firefox ignores this in version 3.6. I know by version 7.0 it works just fine, but I don't know when it was actually fixed.
What version of Firefox are you working with?
Is there a coding standard for HTML? Please suggest links that have the coding styles for HTML.
For example:
<table>
<tr>
<td>
Data
</td>
</tr>
</table>
Here's a few standards to add to your list.
1. Indentation
You seem to have the right idea on this already. The main purpose of indentation should be to make it clear where a tag is opened and closed. Consider this example.
<div><p>Hello World</p><div><p>Hello World</p></div>
This looks okay until you indent it properly and spot the error:
<div>
<p>Hello World</p>
<div>
<p>Hello World</p>
</div>
The original div wasn't closed. Ooops! This is why indentation can be a great time saver.
2. Tags and Attributes
It is generally accepted now that all tags and attributes should be lower case. We dispensed with ALL CAPS tags a long time ago in HTML and also with camelCasing for things like onMouseOver and onClick, which are now all lower case. All attribute values should be surrounded with double-quotes. For example:
<div id="content">Hello</div>
Not
<div id=content>Hello</div>
<DIV ID="content">Hello</DIV>
3. Semantic mark-up only
Don't use any tags to infer style or to control style. For example...
<font>
<b>
Or attributes like...
<table border="2">
Also, don't use things like h1 tags just to get a bigger font.
Try to think of what the tag means, "h1" is a top level heading, "p" is a paragraph, "table" denotes data laid out in a tabular format. Never use a tag for a different purpose to what is intended and try to know what tags are available. For example, using lists instead of manually laying out lists of things.
Don't use tables for layout. (I have emphasised this important point using the semantic "em" tag).
Don't use too many div tags to solve a problem! (div-itus!)
Firstly choose your doctype and then validate your html against the W3C validator for formatting errors
Other things to consider off the top of the head are
Proper indentation
Resisting the temptation to add too much markup i.e. keep the markup simple
Structure your html semantically so that if you switched off style sheets the document would still make sense and be in the right order
Avoid deprecated tags e.g. <font>
Choosing generic class names e.g. mainHeader instead of largeRedHeader
Use classes for repeating elements and ids for elements that appear once
Use classes and ids on parent elements only and style child elements using css e.g. #intro > p instead of #intro .paragraph
HTML Tidy provides a pretty reasoble style, which it will also help you enforce.
Did you mean indentation style? Here is the de facto indentation style:
<table>
<tr>
<td>One line of text - no indent.</td>
<td>
<p>
Multiple lines of text. <br />
With line breaks - indent.<br />
Inline: <b>no indent</b>
</p>
</td>
</tr>
</table>
However, the style above takes too much spaces, for some indentation styles, HTML, HEAD and BODY are not indented.
<html>
<head>
<title>Title</title>
</head>
<body>
<div>
<h1>Title</h1>
<p>Hello, world! The content begins here.</p>
</div>
</body>
</html>
Personally I follow the xhtml standards (all open tags get a closed tag, case sensitivity and so on). It makes it easier to follow the code and to format things automatically. I also generally indent everything 1 from their parents:
<table summary="example table">
<tr>
<td>
Data
</td>
</tr>
</table>
I also tend to try and include all of the required attributes for accessibility, I figure it is a nice thing to do.