Разговорные формы и сокращения в английском языке

Что такое em?

Википедия говорит нам:

em — в типографике относительная единица длины, равная размеру текущего шрифта

Это утверждение не имеет смысла в вебе, так как мы не используем размер точки (point-size). Но имеет смысл, если мы заменим размер точки на размер шрифта (font-size).

Это значит, что: 1em = 20px в том случае, когда у css-селектора прописано правило font-size: 20px;

h1 { font-size: 20px } /* 1em = 20px */
p { font-size: 16px } /* 1em = 16px */

Единица em может использоваться для того, чтобы задавать размеры шрифтов. По факту, использование относительных величин, например, em, для font-size, является хорошей практикой.

h1 { font-size: 2em } /* Что это вообще означает?! */

Какой на самом деле font-size у h1?

Нам придется взглянуть на родительский элемент, чтобы высчитать размер шрифта у этого h1. Допустим, что родительский элементом является html, и его font-size установлен в 16px.

Следуя этому, мы можем увидеть, что высчитанное значение h1 составляет 32px, или 2 * 16px.

html { font-size: 16px }
h1 { font-size: 2em } /* 16px * 2 = 32px */

На самом деле, плохая затея устанавливать font-size для html в пикселях (px), так как тем самым мы переопределяем установки браузера пользователя.

Заместо этого вы можете выбрать проценты в качестве значения font-size, или просто не задавайте его в html.

Заметка: font-size будет установлен в 100%, если вы сами его не задали.

html { font-size: 100% } /* это значит, что по умолчанию размер шрифта будет 16px*/

Для большинства пользователей (и браузеров), размер шрифта в 100% будет по умолчанию выдавать 16px до тех пор, пока они его не поменяют в настройках своего браузера. Хотя редко кто подобным занимается.

Что такое rem?

Rem — это корневой em (Root Em). Он создан, чтобы облегчить вычислительные проблемы, с которыми многие иногда сталкиваются.

Это единица типографики, равная корневому (базовому) значению font-size. Это значит, что 1rem всегда будет равен значению font-size, которое было определено в html.

Ладно, что дальше? вернемся к em.

Em также используется, чтобы задать значения для других свойств

, в дополнение к font-size.

marginpadding

являются двумя из тех свойств, которые измеряются в em’ах.

Вот где большинство людей путается со значениями em.

Rem’ы или em’ы?

Это очень спорный вопрос.

Некоторые разработчики полностью избегают использование rem, утверждая, что использование этих единиц измерения делают их компоненты менее модульными. Другие разработчики использут их для всего, предпочитая ту простоту, что они предоставляют.

Как ни странно, но я все-таки попался в ловушку, используя em’ы и rem’ы в своей работе на разных этапах разработки. Я был в восторге от того, как em’ы помогали мне в создании модульных компонентов, но я терпеть не мог всех тех сложностей, что они привносили в мой код.

Оказывается, у em и rem существуют как сильные, так и слабые стороны. И их нужно использовать по-разному, в зависимоти от обстоятельств.

Как? У меня есть два простых правила:

1. Задавай значения в em, если свойства масштабируются относительно font-size;
2. Во всех остальных случаях задавай значения в rem.

Стало немного проще? Что ж, давайте рассмотрим написание простого компонента (пусть это будет заголовок), используя и em’ы и rem’ы, и вы сами увидите в действии эти два правила.

Абревиатуры

LOL — Laugting Out Loud (громко смеяться)

OMG — Oh my God — О, Боже

WTF — What the fuck? — Что за фигня?

RIP — Rest in peace — Покойся с миром

BTW — By the way — Кстати

RTFL — Rolling on the floor laughing — Катаюсь по полу со смеха

ATM — At the moment — В данный момент

BRB — Be right back — Вернусь

Featuring — feat. — Ft (в содействии, при присутствии)

Versus — Vs. (против)

Единицы измерения: px, em, rem и другие

Еще один момент

Так как рекомендуется использовать лишь несколько размеров типографики, я часто абстрагирую свойство font-size от компонента. Таким образом, я могу быть уверен, что моя типографика останется одинаковой во всех компонентах.

Замена всем отрицательным словам

Ain’t — is not, are not, am not, will not, have not, has not

Используем только em’ы для создания элемента заголовка

Код реализации заголовка на em’ах не многим отличается от кода на rem’ах, с которым уже познакомились. Все, что нам нужно — это заменить rem’ы на em’ы:

.header { font-size: 1em; padding: 0.5em 0.75em; background: #7F7CFF;
}
.header--large { font-size: 2em;
}

Оба, .header и .header—large будут выглядеть точно также, как их двойники на rem’ах.

То, что нужно?

Не-а!

Крайне маловероятно, что ваш сайт будет содержать лишь один элемент заголовка и больше ничего. Нужно рассмотреть как он взаимодействует с другими элементами.

Как правило, эти элементы идут до или после заголовка, как тут:

Заголовки имеют разные связи с другими элементами

Разметка для этого блока будет такой:

Используем только rem’ы для создания элемента заголовка

Скажем, у вас есть элемент заголовка

h2

, который выглядит вот так:

Привет! Я — заголовок!

Стили заголовка должны быть подобны нижеуказанным, если вы указываете все в rem:

.header { font-size: 1rem; padding: 0.5rem 0.75rem; background: #7F7CFF;
}

Все идет по плану.

Далее, давайте создадим заголовок побольше, ведь на одной странице могут располагаться элементы разных размеров.Когда мы будем это делать, давайте попробуем унаследовать настолько много стилей, насколько это возможно.

Разметка нашего второго заголовка будет выглядеть как-то так:

Компоненты на сетке

Прежде, чем мы продолжим, давайте объединим наш заголовок и параграфы в единый компонент:

Отбрасывание g в ing

Somethin’, Doin’, Goin’

’bout = About

Примеры

I am — I’m (I’m (= I am) already here. — Я уже здесь.)I have — I’ve (I’ve (= I have) seen that movie several times. — Я смотрел этот фильм несколько раз.)I will — I’ll (I’ll (= I will) deal with this. — Я позабочусь об этом.)I had / I would — I’d (I’d (= I had) done it by the time you came.

— Я сделал это к тому времени, когда ты пришел. / I promised you I’d (= I would) do it. — Я пообещал тебе, что сделаю это.You are — You’re (You’re (= you are) one of the best students in this class. — Ты один из лучших студентов в этом классе.)You have — You’ve (You’ve (= you have) been such a good friend to me.

— Ты был мне таким хорошим другом.)You will — You’ll (You’ll (= you will) see him soon enough. — Ты встретишься с ним довольно скоро.)You had / you would — You’d (You passed the test because you’d (= you had) prepared for it. — Ты сдал контрольную работу потому, что готовился к ней заранее.

/ You’d (= you would) like it, I’m sure. — Я уверен, тебе бы это понравилось.)He is / he has — He’s (He’s (= he is) a very talented actor. — Он — очень талантливый актер. / He’s (= he has) never lied to us. — Он никогда нам не лгал.)He will — He’ll (He’ll (= he will) show up, he is just running a little late.

— Он придет, он лишь немного запаздывает.)He had / he would — He’d (He’d (= he had) helped me a lot to finish the work by your arrival. — Он помог мне закончить работу до твоего прихода. / He’d (= he would) be very glad to contribute. — Он был бы очень рад помочь.)

She is / she has — She’s (She’s (= she is) standing by the window. — Она стоит у окна. / She’s (= she has) got a lot of money. — У нее много денег.)She will — She’ll (She’ll (= she will) come over to our house tonight. — Сегодня вечером она придет к нам.)

She had / she would — She’d (She’d (= she had) called me before she came. — Она позвонила перед тем, как пришла. / She said that she’d (= she would) give me a call during the lunch-break. — Она сказала, что позвонит мне во время перерыва на обед.)

It is / it has — It’s (It’s (= it is) hot today. — Сегодня жарко. / It’s (= it has) never been so hot. — Так жарко еще никогда не было.)We are — We’re (We’re (= we are) coming, we’re almost there. — Мы идем, почти уже пришли.)We have — We’ve (We’ve (= we have) tried to get a hold of you, but failed.

— Мы пытались связаться с тобой, но не смогли.)We will — We’ll (We’ll (= we will) watch over the kids. — Мы приглядим за детьми.)We had / we would — We’d (We’d (= we had) traveled from Germany to Spain. — Мы путешествовали из Германии в Испанию.

/ We’d (= we would) be much obliged if you helped us. — Мы были бы очень признательны, если бы вы нам помогли.)They are — They’re (They’re (= they are) going to play tennis. — Они собираются играть в теннис.)They have — They’ve (I hear that they’ve (= they have) been told everything.

— Я слышал, что им все рассказали.)They will — They’ll (I hope they’ll (= they will) be on time. — Надеюсь, что они не опоздают.)They had / they would — They’d (They’d (= they had) done their work long before I started doing mine. — Они сделали свою работу задолго до того, как я начал свою.

/ I talked to them and they promised they’d (= they would) do everything in their power. — Я поговорил с ними, и они пообещали, что сделаю все возможное.)There is / there has — There’s (There’s (=there is) little time left. — Осталось мало времени.

/ There’s (= there has) been a very nice chinese restaurant down the street before, but now it’s gone. — Раньше на этой улице был очень хороший китайский ресторан, но сейчас его нет.)There will — There’ll (They say there’ll (= there will) be a new school in our district.

— Говорят, в нашем районе появится новая школа.)There had / there would — There’d (There’d (= there had) been many people here before. — Раньше здесь было много людей. / I knew there’d (= ther would) be a way. — Я знал, что появится какой-нибудь выход.)

Сохранить эту страницу в социальной сети:

| Просмотров 36074 |

Путь второй. свойства лишь некоторых внутренних элементов масштабируются вместе со значением font-size компонента.

Первый случай несложно объснить. Недостатком, однако, является то, что вам придется придерживаться вашей модульной сетки (

Прим. пер.: что это такое, можете почитать тут

), вертикальным ритмам (

Прим. пер.: что это такое, можете почитать тут

) и вы должны быть уверены, что все компоненты имеют одинаковый размер в одно и то же время (особенно, когда вы делаете адаптивные сайты).

Иногда требуется изменить небольшой участок компонента, не изменяя размеров всего остального.

Например, вам нужно изменить font-size заголовков при большей видимой области (viewport).

Только заголовки меняются в размере, когда меняется видимая область

Давайте опишем стили данного примера, взяв за основу стили, которые мы описали выше:

Путь первый. свойства всех внутренних элементов масштабируются вместе со значением font-size компонента

Давайте начнем с примера, чтобы увидеть, как выглядит такой компонент:

Заметили, как font-size, margin и padding всех элементов внутри компонента изменяются в одно и то же время?

Если ваш компонент ведет себя таким же образом при изменении размеров, то вам нужно все размеры указывать в em’ах. То есть код становится таким:

Разговорные формы и сокращения в английском языке

Сленговые

Want to = Wanna

Going to = Gonna, Gon

Give me = Gimme

Got to = Gotta

Don’t know = Dunno

Lot of = Lotta

You, your, you’re — ya

Because — ’cause, cuz, cos

Alright — Aight

You all — Y’all

Come on — C’mon

Them — ’em

Got you — I gotcha

Kind of — Kinda

Trying to — Tryna

Little — Lil’

Player — Playa

Dollar — Dolla

Never — Neva

Подведем итоги

Что же использовать, rem или em? Я думаю, что данный вопрос не совсем корректен. И rem и em имеют свои сильные и слабые стороны, и их можно использовать вместе, — это поможет вам в написании простых, модульных компонентов!

Теперь касательно вас! Чью сторону вы примите в этом споре? Я бы с радостью почитал в комментариях ниже, что вы думаете по этому поводу:)