So while browsing some blogs and forums I came across this line of code.
body{
direction: rtl;
}
and
body{
direction: ltr;
}
I ended up trying it in inspect element and I see that it swaps the side the text is aligned, but some things like "!" in my titles were placed before. Is there and actual use case for this element, or was there and it's now depreciated?
Here is an example of it in use. I originally thought it was maybe for accessibility but it seems to butcher a lot of the text, has anyone used this or is it a dead style?
As mentioned in the comments, the direction style is primarily used in web-development where the end-user's language is written/read from a different direction. It is especially useful for websites that have multi-lingual options as it can fix the placement of your punctuation etc.
There is a lovely explanation on css-tricks that goes in to more detail:
https://css-tricks.com/almanac/properties/d/direction/
Hope this helps!
Related
When text inside of an tag is rendered with a preceding number, the number is sent to the back of the string, and its punctuation is rendered backwards.
HTML:
1. Step One
Renders as:
Step One .1
This might be weird to try and imagine, so I have included a link to the screenshot:
HTML, CSS, & Rendered result:
http://imgur.com/OOFd2tj
I'm at a bit of a loss for what could possibly cause this. My theory is that there is some CSS property being inherited from elsewhere. I have been slowly removing chunks of CSS in an effort to find the guilty party, but so far no luck. This renders 100% properly on other sections of the website that use different style sheets. I was not the original author of the style sheets, so it has been difficult to pin-point the possible source.
I would greatly appreciate if anyone has seen anything similar and might be able to point me in the direction of CSS properties that could possibly cause this, or if it's something else entirely.
Thank you #Tomalak, #briansol and #the_lotus for helping me track this one down.
There was a CSS property being inherited that was causing the text to render this way. Upon viewing inherited computed styles, I saw:
direction: rtl;
The correct property setting would be:
direction: ltr;
Thanks again for your help!
I'm looking for a workaround for this odd IE bug (present in IE11, haven't tested other versions, works perfectly in Chrome/FireFox).
CSS clear:right; doesn't work as expected with rtl language even though clear:left; for an ltr language works without problems.
It's best to show an example so I'll attach screen shots.
I've noticed problems similar to this one all around so any general workaround would be most welcome. I'm not trying to solve it only specifically for this page.
Thanks
The English page: http://colnect.com/en/coins/coin/48962-50_Dollars_XXVIII_Olympic_Games_Athens_2004-Numismatic_Product-Bimetallic_Silver_-_Gold-Australia
The Hebrew page: http://colnect.com/he/coins/coin/48962-50_Dollars_XXVIII_Olympic_Games_Athens_2004-Numismatic_Product-Bimetallic_Silver_-_Gold-%D7%90%D7%95%D7%A1%D7%98%D7%A8%D7%9C%D7%99%D7%94
For lack of an IE 11 I can only test this in IE 10, but the problem presents there as well.
Adding width:100% and overflow:hidden to the .ibox element does seem to fix it – then it won’t need clearing any more, because it will go underneath the floated content before it since there is no place for it beside it any more.
See if that’s a workaround you can make use of.
Could you please create a reduced example demonstrating the problem?
I checked the code and there is no float: right box before (prior in source code) to the cleared <div class="ibox" xid="48962">.
Sorry! there are! .i_d dt {float: right} are floated right. So you are quite possibly right with your query and claims.
Note that you are using invalid attributes in your XHTML 1.1 page.
I am a programmer, not a designer and I don't like writing html and css code. I was using table's for layout for a long time. Now, I want to break this bad practice and start using div's in my website. This was a very important decision for me. Because I really hate using div's.
As always, I started reading written code to understand how positioning of divs work, which is the best way for me to learn something new. However, I really couldn't understand. I think there is something wrong. It shouldn't have been that hard, I really think. This div "API" is written wrong, should have been simpler. However, I know that this discussion is non-sense.
I'm now confused with the usage of the following items,
float, clear, inline, block, position, relative, absolute
I'm looking for web-sites, stackoverflow posts, tutorials for learning div's for beginners who have a programming background like me.
PS: I checked w3's CSS standards. However, it is too long and detailed. I want something shorter, easier to understand for pragmatical purposes.
When I was teaching myself HTML I spent a lot of time on W3Schools website. I simply cannot find a better place to learn HTML and CSS. Here is a sample code that demonstrates how float works:
<!DOCTYPE html>
<html>
<head>
<style>
img
{
float:right;
}
</style>
</head>
<body>
<p>In the paragraph below, we have added an image with style <b>float:right</b>. The result is that the image will float to the right in the paragraph.</p>
<p>
<img src="http://vsual.co/wp-content/uploads/2011/09/HumanRightsLogo_CO.jpg" width="95" height="84" />
This is some text. This is some text. This is some text.
</p>
</body>
</html>
If you are still unsure please fell free to visit W3Schools link 1 and W3Schools Editor
I hope this helps
I would recommend checking out the articles on http://net.tutsplus.com and the related webdesign.tutsplus site.
On their network there's also a very good introduction course on CSS, but it's not free.
Anyway it's not hard at all.
You have a few types of elements: block, inline and online-block you'll use most. Others will be used as well as defaults.
Divs are block elements, so they normally take the while weight of their parent element and as much height as they need. To form complex layouts and columns sometimes we use float, which changes this by placing the div out of the page flow so other elements stack next to it.
That's a really rough and perhaps not accurate enough description, but should serve as a starting point.
Also definitely check this out: http://learnlayout.com
It's an awesome explanation of CSS layouts by example.
I hope this will help you find your way around.
I am using org-mode version 7.4 to organize all of my research notes and then export to HTML so I can create a sort of personal wiki. I just have two questions:
1) Upon export to HTML, the org-mode date stamps appear a very faint gray, is there anyway to change this this color to something more bold? If the fix involves adding a lot of messy CSS tags, is there something I could add to my .emacs file instead? I am hoping to keep my original org file as neat and as legible as possible.
2) Also, what is the best way to add a box around some text in org-mode? I have found that surrounding the text in #+BEGIN_SRC emacs-lisp / #+END_SRC emacs-lisp tags works the same as #+BEGIN_EXAMPLE/#+END_EXAMPLE in that the org-mode features (like using an asterix to mark headings and -,+,. to mark sub-items) do not get evaluated in the block. I am interested in just being able to put a block around the text, but still have the org-mode features such as headings, sub-items, etc., be evaluated.
Thank you for the help, I admit I am a bit of a noob here.
UPDATE: Thank you to Jonathan Leech-Pepin and Juancho for the tips. Part 1 is definitely answered and I apologize for missing it in the manual.
For part 2, I realize I could wrap DIV tags in BEGIN_SRC HTML tags, but I was hopeful that there might be a simpler way of doing this, as it seems like something many people would want to do as a way of highlighting or offsetting text. I was hoping there was something equivalent to the BEGIN_EXAMPLE/END_EXAMPLE tags that I was simply missing. I can use the DIV tags, and will if need be, but it ends up making the original org file look a bit messy and illegible if you end up doing it a lot. So if anyone knows a shortcut, I'd be happy to hear it. I suppose if I knew what I was doing more, I could write my own function, which I may just end up looking into once I'm through my thesis proposal and actually have more free time. :)
Thanks Everyone!!!
For point 1)
You can adjust the CSS settings either for a single file or create a custom stylesheet.
The relevant classes for style formatting are listed in the Org Manual - CSS Support
As a test I added (as a single line, the line return is to make it easier to read on the page)
#+STYLE: <style type="text/css"> .timestamp { color: purple; font-weight: bold; }
</style>
to one of my org files and exported. The timestamps were a bold purple, which was much more legible.
The HTML exporter in org-mode adds class identifiers extensively, so that you can style your HTML at will.
Have a look at http://orgmode.org/manual/CSS-support.html
You don't need to include your CSS inside the document itself. You can either link to a stylesheet via the #+STYLE directive, or you can customize the default CSS that comes with org-mode.
As for question 2, have a look at an exported org-mode file. There are plenty of div sections that you can style via CSS, like adding a border.
As another option if you prefer some trial and error as well as seeing an example vs. a specification is to download some examples and pay attention to what css elements are tweaked.
For example, I was recently trying to change the background color of exported tags in html and found this org-mode mailing list thread. I grabbed a copy of worg-original.css and searched it for the word 'tag':
.tag {
color: #DDD;
font-size: 70%;
font-weight: 500;
}
I didn't like the background and noticed other elements with a background-color property so I played with it and ended up with:
.tag {
color: #000;
background-color: #ccf;
font-size: 85%;
font-weight: 500;
margin: 0 0 0 8em;
}
You can do the same for timestamp properties. I'd suggest finding some things you like and throwing them together in a .css file. From there you can just put the #+style: line in each file (as has already been mentioned):
#+STYLE: <link rel="stylesheet" type="text/css" href="path/to/stylesheet.css" />
This isn't really anything new compared to the other answers; I mainly added it as another approach. I didn't know css, so seeing the list of properties in the org manual (p.author, .timestamp-kwd, .todo) didn't mean much to me. Finding a .css that was specifically designed for org-mode expert, such as those linked in the mailing list above for the org manual and worg were much more helpful since I could see some tangible examples and tweak from there.
I generally use a manual process:
Look at the page, figure out the semantic elements, and build the HTML
Slice up the images I think I'll need
Start writing CSS
Tweak and repeat different steps as necessary
Got a better approach, or a tool?
I have a fairly natural way of coding. The key is to treat the page like a document or an article. If you think of it like this the following becomes logically clear:
The page title is a top level heading
Whether you make the site title or actual page title the h1 is up to you - personally I'd make About Us the h1 rather than Stack Overflow.
The navigation is a table of contents, and thus an ordered list - you may as well use an ol over a ul.
Section headers are h2, sections within those sections are h3s etc. Stack them up.
Use blockquotes and quotes where possible. Don't just surround it with ".
Don't use b and i. Use strong and em. This is because HTML is structural rather than presentational markup. Strong and emphasis tags should be used where you'd put emphasis on the word.
<label> your form elements.
Use <acronym>s and <abbr>s where possible, but only in the first instance.
The easiest: always, always give your images some alternate text.
There's lots of HTML tags you could use that you probably haven't - address for postal addresses, screen code output. Have a look at HTML Dog for some, it's my favourite reference.
That's just a few pointers, I'm sure I could think of more.
Oh, and if you want a challenge write your XHTML first, then write the CSS. When CSS-ing you aren't allowed to touch the HTML. It's actually harder than you think (but I've found it's made me quicker).
Well, when I build a website I tend to try and forget about the design completely while writing the HTML. I do this so I won't end up with any design-specific markup and so I can focus on the semantic meaning of the elements.
Some pointers how to markup things:
menu - use the UL (unordered list) element, since that's exactly what a menu is. an unordered list of choices. example:
<ul id="menu">
<li id="home">Home</li>
<li id="about">About</li>
</ul>
if you'd like an horizontal menu you could do this:
#menu li {
display: block;
float: left;
}
Logo - use a H1 (heading) element for the logo instead of an image.Example:
<div id="header">
<h1>My website</h1>
</div>
And the CSS (same technique can be applied to the menu above if you would like a menu with graphical items):
#header h1 {
display: block;
text-indent: -9999em;
width: 200px;
height: 100px;
background: transparent url(images/logo.png) no-repeat;
}
IDs and classes - use IDs to identify elements that you only have one instance of. Use class for identifying elements that you got several instances of.
Use a textual browser (for instance, lynx). If it makes sense to navigate in this way, you've done good when it comes to accessibility.
I hope this helps :)
I essentially do the same thing Jon does, but here are a few other ideas:
Use Guides in Photoshop (and lock to them). Figure out all of your dimensions for each box/ region ahead of time.
Collect all of your dimensions and color hex values into an info file (I use a txt file) that you can easily reference. This will reduce your alt-tab tax and selecting colors in Photoshop multiple times.
After all my Guides are in place, I slice out the entire website into my images folder, starting with photos and grouped elements, and ending with the various background tiles/images, should they exist. (Tip: Use ctrl-click on the layer preview to select that layer's content).
Notes on using Photoshop:
Use Guides or the Grid.
Use the Notes feature for any pertinent information
Always use Layer Groups for similar elements. We need to be able to turn entire regions off in one click. Put all 'header' content in one Layer Group.
Always name your layers.
You can put each page template in one PSD file and use nested Layer Groups to organize them. This way we don't have to setup all of our guides and notes for each page template on a site.
No shortcuts :) but everybody works slightly differently.
This tutorial that popped up in my feedreader yesterday shows the process from start to finish and might help people who have never done it before but as you are an old hand it's just about streamlining your own methods.
EDIT:
The listapart link certainly is more automated for 'flat' designs where both imageready and fireworks have had pretty good support from day one and it's got better and more semantic with every release but if you have a more complex design it's the twiddly bits that make the design what it is and these have to be done by hand.
I just thought it was worth pointing out that in addition to the excellent advice you've had so far I'd recommend getting a printed version of the design, using a red pen to mark up all the block elements on the design you think you can spot and sitting down with the designer for half an hour and talking through how they envisioned their design working for the use cases that don't fit the static design.
What happens when more text is put in the navigation?
Is this width fixed or fluid?
Is this content pane to the right fixed height or fluid? If it's fluid why did you put a background on it that can't be repeated?
You have a border extending down the page that breaks two otherwise connected elements. Visually it makes sense, but semantically I not can't just use an li to house both those elements. What do you think is more important?
It'll also help you spot potential problems that you might otherwise not have realised were going to be issues until your elbow deep in css.
Not only does it make your job easier after a few times doing it your designer will get a much stronger sense of what is involved in marking up their work - some designers have real trouble comprehending why something they think looks visually very simple will take a few days of css tweaking to make work.
Some of the designers i know, usually uses Illustrator to make the design elements.
This page shows how to do it a little more automated.
Also, get to know the "Layer Comps" feature. I use this for changing button states.
Create layer comps for normal, hover, and active.
In each of these, set up the effects/color overlays and visible layers which belong with that state.
Save for web: go to a different folder for each state, unless it's easier to rename each slice (otherwise your hover button slices will overwrite your regular slices).