Multilingual notes

Multilingual notes.txt

Multilingual notes
-- Don't start with Arabic design.
-- Don't use words direct in template.
-- padding and margin for parent better than child.
-- padding and margin left + right better than one direction.
-- Don't forget page Direction attribute. all block elements depend on it.
-- highlight what you will edit soon. /* Need Edit In RTl */
-- Make the Direction edits in the same time.
-- Don't ever forget comments and ordering of elements.
-- use inline-block instead of float if you don't need float.
-- RTL file is for direction only.
-- RTL file after main file.
-- consider word length when specify element width
-- don't destroy nesting when creating RTL file.
don't use element that need to change like arroews((html)) . use pseudo elements (( csss before and after)) => to get clean html
-- tag : <bdi></bdi>
-- attribute : dir= "auto"
-- attribute : text-align = [ start | end ]
-- attribute : float = [ inline-start | inlineend ]
-- use framwork : [ Boostrap - foundation - symantic ui ]
-- float classes : [ float-left | float-right ]

/* Start My Framework */
helper classes
in boostrap pullinstad of float
in main style
.float-left{
  float:left;
}
.float-right{
  float:right;
}
in RTL
.float-left{
  float:right;
}
.float-right{
  float:left;
}
/*----------------*/
ex2:
/* en */
text-right{
  text-align:right;
}

text-left{
  text-align:left;
}
/* ar */
text-right{
  text-align:left;
}

text-left{
  text-align:right;
}
/* End My Framework */
-- Direction classes : [ ltr-dir | rtl-dir ]
(font for arabic and english)
span for link or email or phone number
-- properties you need to focus on
* margin
* padding
* border-radius
* pseudo elements : (before - after)
* border
* box-shadow
* float
* transform: rotate(20deg)
* text-align
* position => resest (right : auto)

Source : https://www.youtube.com/playlist?list=PLDoPjvoNmBAxNQiUCxhjfDM8STo1_Dl8c