diff --git a/translations/hy.yaml b/translations/hy.yaml new file mode 100644 index 0000000..e06568a --- /dev/null +++ b/translations/hy.yaml @@ -0,0 +1,171 @@ +# English + +global.title: "CSS Լեյաութներ" +global.short_title: "CSS" +global.home: "Սկիզբ" +global.toc: "Բովանդակություն" +global.next: "Առաջ" +global.previous: "Ետ" +global.feedback: "Issues / Feedback" + +util.extra_credit: "extra credit" +util.ipsum: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit." +util.nav.1: "Home" +util.nav.2: "Taco Menu" +util.nav.3: "Draft List" +util.nav.4: "Hours" +util.nav.5: "Directions" +util.nav.6: "Contact" + +index.1: "Այս դասընթացում դիտարկվում են CSS տեխնոլոգիայի այն բաժինները, որոնք օգտագործվում են կայքերի կառուցվածքներում (Լեյաութներում, layout)։" +index.2: "" +index.translator: "" +index.get_started: "Սկսի՛ր" + +no_layout.title: "no layout" +no_layout.1: "Եթե քո ուզածը միայն մեկ երկար սյունակ զբաղեցնող բովանդակութուն է, ապա ոչինչ, եթե կայքում չլինի լեյաութ(layout): Սակայն եթե օգտատերը իր զննարկիչը բավականին լայն դարձնի, ապա ընթերցանությունը կդժվարանա․ ամեն տողը կարդալուց հետո աչքերը աջից-ձախ երկար ճանապարհ պիտի անցնեն դեպի նոր տողի սկզիբը։ Ասածիս իմաստը հասկանալու համար փորձիր փոխել զննարկիչիդ չափերը։" +no_layout.2: "Այս խնդիրը լուծելուց առաջ, արի համոզվենք, որ կարևոր display հատկության իմաստը պարզ է։" + +display.title: "\"display\" հատկությունը" +display.intro: "display-ը լեյաութները կառավարող կարևորագույն հատկությունն է։ Ամեն էլեմենտ ունի display հատկության լռելայն արժեք, կախված իր իսկ տեսակից։ Էլեմենտների մեծամասնության համար display հատկության լռելայն արժեքներ են block կամ inline արժեքները։ block էլեմենտները հաճախակի կոչվում են block-level էլեմենտներ։ Իսկ inline էլեմենտները ուղակի կոչվում են inline էլեմենտներ։" +display.block.title: "block" +display.block: "div-ը ստանդարտ բլոկային էլեմենտ է։ Բլոկային էլեմենտները սկսվում են նոր տողից և ձգվում են որքան հնարավոր է դեպի ձախ և աջ։ Մյուս հաճախակի օգտագործվող բլոկային էլեմենտներն են p և form։ Բլոկային են նաև նոր HTML5-ական header, footer, section էլեմենտները։ Սրանցով իհարկե չի սահմանափակվում ցանկը։" +display.inline.title: "inline" +display.inline.1: "span-ը ստանդարտ inline էլեմենտ է: inline էլեմենտը կարող է փաթաթել որոշ տեքստ պարագրաֆի ներսում․" +display.inline.2: "ինչպես այստեղ" +display.inline.3: "առանց կազմալուծելու պարագրաֆի տեսքը ։ a էլեմենտը նույնպես ամենաօգտագործվող inline էլեմենտներից մեկն է։" +display.none.title: "none" +display.none.1: "display հատկության մյուս տարածված արժեքը none արժեքն է։ Որոշ հատուկ էլեմենտներ լռելյայն ունեն այս արժեքը, ինչպիսին է օրինակ script-ը։ display։none-ը հաճախ օգտագործվում է Javascript-ի օգնությամբ էլեմենտները թաքցնելու կամ ցուցադրելու համար, առանց դրանք իրականում ջնջելու կամ վերստեղծելու։" +display.none.2: "Սա տարբերվում է visibility հատկությունից. display-ին none արժեքը տալիս էջը կցուցադրվի այնպես, կարծես այդ էլեմենտը բացակայում է, սակայն visibility: hidden;-ը կթաքցնի էլեմենտը պահպանելով էլեմենտի զբաղեցրած տարածությունը որպես դատարկ տարածություն։" +display.other.title: "display-ի այլ արժեքներ" +display.other: "Կան նաև display հատկության բազմաթիվ էկզոտիկ արժեքներ, ինչպիսիք են list-item և table արժեքները։ Այստեղ սպառիչ ցուցակն է։ Ավելի ուշ մենք կքննարկենք նաև inline-block և flex արժեքները։" +display.extra: "Ինչպես նշվեց բոլոր էլեմենտները ունեն display հատկության իրենց լռելյալն արժեքները։ Սակայն միշտ հնարավոր է փոխել դրանք։ Ոչ մի խնդիր չկա inline div դիվ սարքելու մեջ, կարելի է փոխել display-ի արժեքը էլեմենտների ձևավորումը հարմարեցնելու համար։ Հորիզոնտալ մենյու սարքելու նպատակով li էլեմենտները inline դարձնելը տարածված եղանակ է։" + +margin_auto.title: "margin: auto;" +margin_auto.1: "Setting the width of a block-level element will prevent it from stretching out to the edges of its container to the left and right. Then, you can set the left and right margins to auto to horizontally center that element within its container. The element will take up the width you specify, then the remaining space will be split evenly between the two margins." +margin_auto.2: "The only problem occurs when the browser window is narrower than the width of your element. The browser resolves this by creating a horizontal scrollbar on the page. Let's improve the situation..." + +max_width.title: "max-width" +max_width.1: "Using max-width instead of width in this situation will improve the browser's handling of small windows. This is important when making a site usable on mobile. Resize this page to check it out!" +max_width.2: "By the way, max-width is supported by all major browsers including IE7+ so you shouldn't be afraid of using it." + +box_model.title: "the box model" +box_model.intro: "While we're talking about width, we should talk about width's big caveat: the box model. When you set the width of an element, the element can actually appear bigger than what you set: the element's border and padding will stretch out the element beyond the specified width. Look at the following example, where two elements with the same width value end up different sizes in the result." +box_model.simple: "I'm smaller..." +box_model.fancy: "And I'm bigger!" +box_model.outro: "For generations, the solution to this problem has been math. CSS authors have always just written a smaller width value than what they wanted, subtracting out the padding and border. Thankfully, you don't have to do that anymore..." + +box_sizing.title: "box-sizing" +box_sizing.1: "Over the generations, people realized that math is not fun, so a new CSS property called box-sizing was created. When you set box-sizing: border-box; on an element, the padding and border of that element no longer increase its width. Here is the same example as the previous page, but with box-sizing: border-box; on both elements:" +box_sizing.simple: "We're the same size now!" +box_sizing.fancy: "Hooray!" +box_sizing.2: "Since this is so much better, some authors want all elements on all their pages to always work this way. Such authors put the following CSS on their pages:" +box_sizing.3: "This ensures that all elements are always sized in this more intuitive way." +box_sizing.4: "Since box-sizing is pretty new, you should use the -webkit- and -moz- prefixes for now, as I have in these examples. This technique enables experimental features in specific browsers. Also, keep in mind that this one is IE8+." + +position.title: "position" +position.intro: "In order to make more complex layouts, we need to discuss the position property. It has a bunch of possible values, and their names make no sense and are impossible to remember. Let's go through them one by one, but maybe you should bookmark this page too." +position.static.title: "static" +position.static.1: "static is the default value. An element with position: static; is not positioned in any special way. A static element is said to be not positioned and an element with its position set to anything else is said to be positioned." +position.relative.title: "relative" +position.relative.1: "relative behaves the same as static unless you add some extra properties." +position.relative.2: "Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element." +position.fixed.title: "fixed" +position.fixed.1: "A fixed element is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. As with relative, the top, right, bottom, and left properties are used." +position.fixed.2: "I'm sure you've noticed that fixed element in the lower-right hand corner of the page. I'm giving you permission to pay attention to it now. Here is the CSS that puts it there:" +position.fixed.3: "A fixed element does not leave a gap in the page where it would normally have been located." +position.fixed.4: "Mobile browsers have surprisingly shaky support for fixed. Learn more about the situation here." +position.fixed.example: "Hello! Don't pay attention to me yet." +position.absolute.title: "absolute" +position.absolute.1: "absolute is the trickiest position value. absolute behaves like fixed except relative to the nearest positioned ancestor instead of relative to the viewport. If an absolutely-positioned element has no positioned ancestors, it uses the document body, and still moves along with page scrolling. Remember, a \"positioned\" element is one whose position is anything except static." +position.absolute.2: "Here is a simple example:" +position.absolute.relative: "This element is relatively-positioned. If this element was position: static; its absolutely-positioned child would escape and would be positioned relative to the document body." +position.absolute.absolute: "This element is absolutely-positioned. It's positioned relative to its parent." +position.absolute.3: "This stuff is tricky, but it's essential to creating great CSS layouts. On the next page we'll use position in a more practical example." + +position_example.title: "position example" +position_example.1: "This position stuff might make a little more sense in a practical example. Below is a realistic page layout." +position_example.section.1: "The margin-left style for sections makes sure there is room for the nav. Otherwise the absolute and static elements would overlap" +position_example.section.2: "Notice what happens when you resize your browser. It works nicely!" +position_example.2: "This example works because the container is taller than the nav. If it wasn't, the nav would overflow outside of its container. In the coming pages we'll discuss other layout techniques that have different pros and cons." +position_example.footer: "If you use a fixed header or footer, make sure there is room for it! I put a margin-bottom on the body." + +float.title: "float" +float.1: "Another CSS property used for layout is float. Float is intended for wrapping text around images, like this:" + +clear.title: "clear" +clear.floating: "I feel like I'm floating!" +clear.1: "The clear property is important for controlling the behavior of floats. Compare these two examples:" +clear.2: "In this case, the section element is actually after the div. However, since the div is floated to the left, this is what happens: the text in the section is floated around the div and the section surrounds the whole thing. What if we wanted the section to actually appear after the floated element?" +clear.3: "Using clear we have now moved this section down below the floated div. You use the value left to clear elements floated to the left. You can also clear right and both." + +clearfix.title: "the clearfix hack" +clearfix.1: "Here is a weird, bad thing that can sometimes happen when using floats:" +clearfix.2: "Uh oh... this image is taller than the element containing it, and it's floated, so it's overflowing outside of its container!" +clearfix.3: "Boo. There is a way to fix this, but it's ugly. It's called the clearfix hack." +clearfix.4: "Let's try adding this new CSS:" +clearfix.5: "Now let's see what happens:" +clearfix.6: "Much better!" +clearfix.7: "This works for modern browsers. If you want to support IE6 you will want to add the following:" +clearfix.8: "There are exotic browsers that may require extra attention. The world of clearfixing is pretty scary, but this simple solution will work for the vast majority of browsers today." + +float_layout.title: "float layout example" +float_layout.1: "It's very common to do entire layouts using float. Here is the same layout we did with position earlier, but using float instead." +float_layout.2: "This example works just like the last one. Notice we put a clearfix on the container. It's not needed in this example, but it would be if the nav was longer than the non-floated content." + +percent.title: "percent width" +percent.1: "Percent is a measurement unit relative to the containing block. It's great for images: here we make an image that is always 50% the width of its container. Try shrinking down the page to see what happens!" +percent.2: "You could even use min-width and max-width to limit how big or small the image can get!" +percent.layout.title: "percent width layout" +percent.layout.1: "You can use percent for layout, but this can require more work. In this example, the nav content starts to wrap in a displeasing way when the window is too narrow. It comes down to what works for your content." +percent.layout.2: "When this layout is too narrow, the nav gets squished. Worse, you can't use min-width on the nav to fix it, because the right column wouldn't respect it." + +media_queries.title: "media queries" +media_queries.1: "\"Responsive Design\" is the strategy of making a site that \"responds\" to the browser and device that it is being shown on... by looking awesome no matter what." +media_queries.2: "Media queries are the most powerful tool for doing this. Let's take our layout that uses percent widths and have it display in one column when the browser is too small to fit the menu in the sidebar:" +media_queries.3: "Now when you resize your browser it's even cooler than ever!" +media_queries.4: "Tada! Now our layout looks great even on mobile browsers. Here are some popular sites that use media queries this way. There is a whole lot more you can detect than min-width and max-width: check out the MDN documentation to learn more." +media_queries.5: "You can make your layout look even better on mobile using meta viewport." + +inline_block.title: "inline-block" +inline_block.1: "You can create a grid of boxes that fills the browser width and wraps nicely. This has been possible for a long time using float, but now with inline-block it's even easier. inline-block elements are like inline elements but they can have a width and height. Let's look at examples of both approaches." +inline_block.hard_way.title: "The Hard Way (using float)" +inline_block.hard_way.box: "I'm floating!" +inline_block.hard_way.after: "I'm using clear so I don't float next to the above boxes." +inline_block.easy_way.title: "The Easy Way (using inline-block)" +inline_block.easy_way.info: "You can achieve the same effect using the inline-block value of the display property." +inline_block.easy_way.box: "I'm an inline block!" +inline_block.easy_way.after: "I don't have to use clear in this case. Nice!" +inline_block.2: "You have to do extra work for IE6 and IE7 support of inline-block. Sometimes people talk about inline-block triggering something called hasLayout, though you only need to know about that to support old browsers. Follow the previous link about IE6 and IE7 support if you're curious to learn more. Otherwise, let's continue." + +inline_block_layout.title: "inline-block layout" +inline_block_layout.1: "You can also use inline-block for layouts. There are a few things to keep in mind:" +inline_block_layout.caveat.1: "inline-block elements are affected by the vertical-align property, which you probably want set to top." +inline_block_layout.caveat.2: "You need to set the width of each column" +inline_block_layout.caveat.3: "There will be a gap between the columns if there is any whitespace between them in the HTML" +inline_block_layout.tada: "Tada!" + +column.title: "column" +column.1: "There is a new set of CSS properties that let you easily make multi-column text. Have a look:" +column.2: "CSS columns are very new, so you need to use the prefixes, and it won't work through IE9 or in Opera Mini. There are some more column-related properties, so click here to read more. Otherwise, off to the next topic." + +flexbox.title: "flexbox" +flexbox.1: "The new flexbox layout mode is poised to redefine how we do layouts in CSS. Unfortunately the specification has changed a lot recently, so it's implemented differently in different browsers. Still, I'd like to share a couple examples so you know what's coming up. These examples currently only work some browsers that use the latest version of the standard." +flexbox.2: "There are a lot of out-of-date flexbox resources around. If you want to learn more about flexbox, start here to learn how to identify if a resource is current or not. I have written a detailed article using the latest syntax." +flexbox.3: "There is a lot more you can do with flexbox; these are just a few examples to give you an idea:" +flexbox.simple.title: "Simple Layout using Flexbox" +flexbox.simple.1: "Flexbox is so easy!" +flexbox.fancy.title: "Fancy Layout using Flexbox" +flexbox.fancy.1: "I will be 200px when there is room, and I will shrink down to 100px if there is not room, but no smaller." +flexbox.fancy.2: "I will always be 200px, no matter what." +flexbox.fancy.3: "I will fill up 1/3 of the remaining width." +flexbox.fancy.4: "I will fill up 2/3 of the remaining width." +flexbox.centering.title: "Centering using Flexbox" +flexbox.centering.1: "Finally, it's easy to vertically center something in CSS!" + +frameworks.title: "css frameworks" +frameworks.1: "Because CSS layout is so tricky, there are CSS frameworks out there to help make it easier. Here are a few if you want to check them out. Using a framework is only good idea if the framework really does what you need your site to do. They're no replacement for knowing how CSS works." +frameworks.2: "That's it! If you have any feedback on this site, please let me know on Twitter!" + +about.title: "about this site" +about.credits: "Written and built by Greg Smith. Design by Isaac Durazo. We work at Bocoup."