The drug, marketed as Hamsyl – Junior will now be available in a 1500 IU pack, and is priced at ₹Rs 20,970, a company official told businessline

Dr Swati Mohan, the Indian-born NASA engineer, whose historic words, “touchdown confirmed”, announced to the world the successful landing of the Perseverance rover on the surface of Mars on February 18, 2021

IIT Madras’ Centre for Computational Brain Research is receiving support from Nvidia

This collaboration aims to establish accelerator programs that enhance India’s Aviation, Space, and Defence ecosystem

Many countries are watching Russia build a 1,200 MW fast breeder as a possible template for themselves

The SpaceX’s Falcon 9 rocket catapulted the TASL’s satellite from Launch Complex 39A at Kennedy Space Center on April 7, says TASL

The ‘START’ programme is a kick start opportunity for the aspiring scientists and engineers

The astronaut from Japan will take part in the Artemis program, a NASA-led effort to return astronauts to the moon as early as 2026, more than half a century after the last Apollo mission.

This was part of the Gairdner Foundation’s announcement of its 2024 Canada Gairdner Award winners

Ananth Technologies designs avionics for ISRO and Defence, supplying components to 98 satellites and 78 launch vehicles

The finding challenges the conventional isolation-by-distance model in genetic studies

These teams will be given six months of mentorship, training and support besides up to ₹5 Lakh to develop their prototypes for sustainable and circular economy solutions

“Vaccines are the vital pillar of global health, and the IVMA mission is to ensure that every individual, regardless of where they live, has access to life-saving immuniszations” - Krishna Ella, Co-Founder, Executive Chairman of Bharat Biotech

The WHO has recognised TTS as a rare but serious adverse event linked to specific Covid-19 vaccines.

Pneubevax14   14 was found to be safe and induced robust and functional serotype specific immune responses to all 14 serotypes

The system was launched around 8.30 am from the ground mobile launcher.

Low intake of essential nutrients can disrupt metabolism and increase the risk of insulin resistance

These storms, caused by high energy particles from the Sun hitting our atmosphere, have the potential to knock out electrical grids and satellites

These chips will be utilised for quantum computing and high-speed secured communication systems

NASA to provide advanced training to Indian astronauts for joint mission to International Space Station, US envoy Eric Garcetti says

The historic test flight, with fellow astronaut Barry Wilmore, aims to certify Starliner for routine space travel.

Veteran NASA astronauts Sunita Williams and Barry Wilmore, with 500 combined days in space, piloted Boeing’s CST-100 Starliner from Florida, leveraging their extensive experience in spacewalks and ISS command.

The Sudha Gopalakrishnan Brain Centre powers an ambitious Global Project to image the human brain at the cellular level by generating unprecedented human brain data, scientific output and technology tools

India ranks 6th amongst the top nine deeptech ecosystems globally

Problems with the capsule’s propulsion system and other related concerns have led to the delay in the astronauts’ return.

TIDCO plans to introduce additional incentives to attract companies and accelerate development in the region. 

Recent analyses of Cassini’s radar data reveal detailed characteristics of Titan’s liquid hydrocarbon seas, primarily composed of methane and ethane. 

Prahlad Chandra Agrawal is the first Indian recipient of this award, which recognizes outstanding contributions to the development of space research, particularly those in a leadership role.

India’s participation will enable it to contribute to global ocean governance, access biodiversity funds, and play a role in establishing marine protected areas and sharing marine genetic resources.

Despite the successful landing, two test pilots, Butch Wilmore and Sunita Williams, will remain in space until next year due to NASA’s safety concerns.

The astronauts stuck in space say it was hard to see their Boeing capsule leave without them

SpaceX launched the rescue mission on Saturday with a downsized crew of two astronauts and two empty seats reserved for Butch Wilmore and Sunita Williams

Embarking on a 1.8 million-mile journey from Kennedy Space Centre, the spacecraft is set to reach Jupiter in 5 1/2 years, utilising gravity assists from Mars and Earth

WMO study says 2023 figure is 151 per cent % of pre-industrial period

Traders can consider long positions

How to glean the relationship between put-call ratio and underlying returns

One more leg of downmove is still a possibility before the broader uptrend resumes 

Bank Nifty futures can fall to 51,300 if it slips below 52,000 

Traders need to wait for strong cues about next leg of trend

Here’s a low down on the key components in future contracts’ pricing

FPI outflows overlapping with earnings slowdown and the return of the dragon weigh in

India’s securities regulator is looking to open up a fresh vehicle for investments for people in the mass affluent segment that will be different from existing mutual fund alternatives

You should reduce equity investments and increase bond investments starting five years from the end of the time horizon for a goal. You should, however, save more during this period.

I’m currently investigating the new aspect-ratio declaration and plan to write an article about it. However, I got stuck on aspect ratios in a grid context. Chrome/Safari and Firefox do something different here, and I understand neither approach. So I hope I can get some help.

aspect-ratio is currently supported by Chrome 90, by Firefox 88 with the correct flag enabled, and by Safari Technology Preview. I tested mostly in the first two — for complicated reasons I cannot install STP right now, but a kind Twitter follower sent me a few screenshots. It behaves as Chrome.

First, a general remark. aspect-ratio is intentionally a fairly weak declaration. It gives way if other constraints on boxes make the requested aspect ratio impossible. Take this example:

.my-box {
	width: 100px;
	height: 50px;
	aspect-ratio: 16/9;
}

The box has a fixed width and height, and they overrule the aspect-ratio. The box will thus have a 2/1 aspect ratio, as dictated by its width and height, and not a 16/9 one.

Flexbox

With that in mind, let’s first look at aspect-ratio in a flexbox environment. I think I understand what’s going on here, and the browsers all do the same, so this is a good reference point for the grid problems we’ll encounter later.

Flex items take their width from the flexbox environment. In my example they have a flex-basis: 30%, but they could also have a width or even no width/flex-basis definition at all. In all cases the flexbox algorithm decides on the width of each item.

Once the width has been determined, it’s time for the height. Let’s assume it’s not set. In flexbox, height: auto means not “as high as you need to be for your content” but “as high as the highest box in your row.”

That is, naturally flexbox would give the boxes an equal width (because that’s what my flex declarations say) and an equal height (because that always happens in flexbox). Apparently, this counts as a set height for the aspect-ratio algorithm.

As a result the 16/9 value is ignored because the 4/3 results in a larger height, and this value is therefore the one that determines the height of the entire row.

As you see, the third box in this example does have the correct aspect ratio. That’s because it has an explicit height: min-content: set your height to whatever your content needs, and, more importantly, ignore the row height of the flex box. This, apparently, gives the aspect ratio algorithm the opening it needs to set the height to the one requested by the aspect-ratio: 16/9.

I’m not sure if my reasoning is right. I am very certain that this works in all browsers, though, so you can use height: min-content in production straight away. (max-content also works. There’s no real difference between the two in height declarations.)

The problem: grid

Now we get to the problem: grid. To follow along, please look at the example below in Firefox 88 with the aspect-ratio flag on, and in either Chrome or Safari Technology Preview.

I expected grid to more or less behave the same as flexbox: the widths are set by the grid, the heights by the row height, and getting the proper aspect ratio would require height: min-content. That last clause is correct: the min-content trick works as it does in flexbox. It’s the behaviour of th 16/9 box without min-content that surprises me.

Here, again, the third box has height: min-content and takes the correct aspect ratio, which means not obeying the row height, in all browsers.

Firefox first. All boxes get their correct aspect ratio and they all have the same width, as the repeat: (3,1fr) grid template dictates. That means their height differs. More importantly, the grid container box now becomes only as high as is necessary to contain the items as they would have been without their aspect ratio.

I am 99% certain that the grid container behaviour is a bug. I am less certain whether the aspect-ratio being obeyed is also a bug.

In Chrome, the second and third box behave as expected: the last box becomes less high than the row height because of height: min-content, and the second box dictates the row height with its 4/3 aspect ratio.

But what’s up with the first box? It appears that it takes the row height as a given, but then sets the width to the value dictated by the 16/9 aspect ratio, ignoring the fact that this box now overflows its proper grid placement. Is this a bug? Or does height count for more than width in a grid context? I don’t know.

In the second example all grid items have min-height: 100px. In all browsers they they calculate their width from their aspect ratio. Thus they break the grid-defined widths. This is understandable, given that the explicit height declaration is “stronger” than the implied widths from the grid definition. (Or rather: I devoutly hope I’m right here and not talking nonsense.)

Thus maybe Firefox on the one hand and Chrome/Safari on the other are not as far apart as one would think from the first grid example. Still, something is buggy in that example. I just can’t figure out what it is.

Stumped. Please help.

This week we’ll take a look at the new aspect-ratio declaration and its use. Una Kravets wrote the introductory article, but there are some additional technical points to be made. I also wrote a little fallback that you might use if you need aspect-ratio right now.

At the time of writing aspect-ratio is supported by Chrome 90, by Safari Technology Preview, and by Firefox 88 if you set the aspect-ratio flag in about:config. You need one of these browsers to see the examples below — except for the fallback, which should work in all browsers that support custom properties.

Weak declaration

aspect-ratio defines the ratio between the width and height of a box, but it is a weak declaration. If the box has a specified width and height the browser uses those values and ignores the aspect ratio. Width and height might be specified by explicit width and height declarations or by other means, as we’ll see below.

In this example all three boxes have aspect-ratio: 16/9. The first box has width: auto; height: auto; i.e. as much width as you can take, and as little height as you need. aspect-ratio takes the width, converts it to pixels, and applies the defined aspect ratio to calculate the height.

The second box has a height: 50px; width: auto. The height is strong, but the auto width is weak and allows aspect-ratio to override it. Thus the box’s width is calculated by taking the height and applying the aspect ratio.

The third box has a fixed width: 150px; height: 100px as well as an aspect-ratio: 16/9. Now both width and height are strong and the aspect ratio is ignored.

Rounding

Even if aspect-ratio works fine the browser must find an integer number of device pixels for the box’s width and height. Fractions are discarded somewhere along the way. That’s why the calculated aspect ratio of a box is rarely 100% exact. In the examples you’ll often see a narrow stripe of red poking from underneath the background image. That image has the same aspect ratio as the box it appears in, but apparently uses a different calculation. In normal circumstances these tiny differences are not visible to the naked eye, so you can safely ignore them.

Fat red stripes, such as in the last box in the first example, are a sign of trouble, though.

min- and max-width and -height

You can set a min/max-width/height on the boxes. These are obeyed as normal, and aspect-ratio is obeyed as well. In this example the first box has a min-height: 100px, the second a max-height: 50px, and the third min-width: 100px. As you see they stretch up or down to their defined maximum and minimum and retain their aspect-ratio.

box-sizing: border-box!

Now we come to a trickier topic unearthed originally by Ana Tudor — and this entire article is a good read that I recommend.

If it works, aspect-ratio sets either the width or the height of a box to match the other side and the defined aspect ratio. However, the exact effect depends on how width and height are defined; on box-sizing, in other words.

width may mean either the content width, without padding and border (box-sizing: content-box; the default), or the width of content + padding + border (box-sizing: border-box). In general, the latter is what we want.

In the next example the boxes have padding: 10%. Percentual padding is always calculated relative to the width of the parent element. Thus this box has a padding of 10% of its parent element’s width, even at the top and the bottom.

Since the padding is equal on all four sides, it may break the box’s aspect ratio. This depends on box-sizing. If you use the default box-sizing: content-box the width and height have the correct aspect ratio, but they define only the content area. An equal amoung of padding is added on all sides, and the aspect ratio is destroyed.

This problem is easy to solve: set box-sizing: border-box. Now width and height define the content, padding, and border combined, and this entire area is given the correct aspect ratio. Thus the padding is seamlessly integrated with the proper aspect ratio.

In fact, you should always set box-sizing: border-box in all your sites. content-box was a mistake, as W3C itself admitted (and as I said back in 2002). The fact that it fixes aspect-ratio merely gives us an extra reason to do so.

aapect-ratio in flexbox

In a flex or grid context, aspect-ratio can appear not to work. In fact, running into these problems was what caused me to write this article in the first place.

Look at the example below. It doesn’t work! Oh noesies! What’s going on?

What happens here is default flexbox behaviour. First the widths of the items are calculated (here from flex-basis: 30%; grow: 1), and once that’s done the height of all items is set. These heights are calculated by applying their aspect ratio, but the tallest box is used to set the height of all items in the row. In our example that is the 1/1 box, so the 16/9 and 4/3 boxes also have an aspect ratio of 1/1.

This default behaviour is ruled by align-items: stretch, which is part of the flexbox default. If you use any other value the boxes’ height is set to auto and they take their proper aspect ratio. flex-start is the most obvious choice, but see CSS Tricks’ great flexbox guide for more options.

If for some reason you want to overrule the height stretch on only a single item you can give that item either align-self: flex-start or any other value, or height: min-content. Both work fine. The third box in the next example has height: min-content.

aspect-ratio and grid

In a grid context aspect-ratio encounters the same problems as in a flexbox environment, only with added browser bugs that I wrote about last week. I expected the same behaviour as in a flexbox context, but that’s not entirely what’s happening.

The good news is that align-items, align-self, and height: min-content all work exactly as with flexbox. They negate the default grid behaviour of stretching the height of all elements in a row to the height of the highest element.

The problems are in the default rendering of aspect-ratio. Chrome and Safari implement this in one incorrect way, and Firefox is a quite different, equally incorrect way.

If all boxes in the example below have the same width and height the bugs have been solved. They get the same height for the reasons I explained under flexbox — grid works the same in this respect (I hope).

Firefox obeys the aspect-ratio while I think it shouldn’t. Instead, like in the flexbox example, it should stretch the boxes to the height of the highest in the row. In addition it calculates the height of the entire grid by assuming its items have the minimum height needed for their content — and since my example boxes do not have any content that height is 0. Thus the grid container is way too small. Both are clearly bugs that will probably be fixed soon.

Chrome and Safari TP size the grid container correctly, but seem to take the height as reference and size the width accordingly instead of taking the width as reference and sizing the height. Thus the 16/9 and 4/3 items become way too wide. I think this is also a bug — if it isn’t someone will have to carefully explain to me what’s going on. Fortunately this bug goes away if you use align-items — which you’re going to want to do in any case.

A fallback

(After writing this fallback I found that Ana Tudor wrote pretty much the same one in her article. I mean, why do I even bother competing with scarily smart people like her? But I came by it independently, honest.)

5/1 3/1 16/9 4/3 9/16

Since browser support isn’t quite there yet we need to continue to use the old padding-top trick as a fallback, as I do in this paragraph. It is supposed to have an aspect ratio even in browsers that do not support aspect-ratio.

The core of the fallback is the following CSS. Fair warning: this solution is only lightly tested; I went from conception to successful execution in about 30 minutes — though I spent 90 more minutes on a custom property issue.

The extra <span> is ugly, but I don’t see a way around it. If your aspect-ratioed boxes do not contain text you can leave it out.

<p class="test"><span>The text</span></p>

p.test {
	--aspectRatio: 16/9;
	--padding: 0.5em;
	border: 1px solid;
	padding: var(--padding);
	aspect-ratio: var(--aspectRatio);
	box-sizing: border-box;
}

@supports not (aspect-ratio: 16/9) {
	p.test {
		padding: 0;
		padding-top: calc((1 / (var(--aspectRatio)))*100%);
		position: relative;
	}
	
	p.test > span {
		display: block;
		position: absolute;
		top: var(--padding);
		left: var(--padding);
	}
}

Store the desired aspect ratio in --aspectRatio. Set aspect-ratio to that value. If the browser doesn’t support aspect-ratio, set the padding-top to 1 / the aspect ratio as a percentage. The script that runs in this page changes the value of --aspectRatio.

The trick here is that percentual padding is calculated relative to the parent element’s width. If the box spans its parent’s entire width, you can take that width, multiply it by 1 divided by the aspect ratio (so for instance 9/16th when the aspect ratio is 16/9) and convert the result to a percentage. Now the padding stretches the box to the desired aspect ratio.

If the box has any real content we have to wrap it in an extra HTML element and give that element position: absolute so that it does not influence the box’s height. Then we place it in the box, with a top and left coordinate equal to the box’s padding. Now the text appears to flow naturally. You don’t need this trick if the box only has a background image or gradient; those ignore padding anyway.

Or you can wait a few months until all browsers support aspect-ratio. It won’t be long now.

I may write a separate article about the incredible number of brackets we need in the padding-top line.

Actor Prakash Raj says fans will soon get to see him perform live on stage

Sai Rajesh, the writer-director of the Telugu romantic drama ‘Baby’ that has been eliciting extreme responses, says he did not intend to make a toxic film

Actor-producer Rana Daggubati’s Spirit Media debuts at San Diego Comic-Con 2023 by announcing the mythological film ‘Hiranyakashyap’ and comic based on the superhero film ‘Minnal Murali’ 

People in 12 villages downstream vacated, shifted to relief camps. Spillway discharge of flood waters begins at Jurala as Almatti, Narayanpur let out water