simon-clematide commented 5 months ago

In the transcription view, text lines are scaled to some value to match the column witdth. This makes short lines scale a lot more than "normal" lines. I think the scaling should be done relative to the longest line to look more natural (see below).

https://impresso-project.ch/app/issue/waeschfra-1868-09-20-a/view?sq=Cg8QAhgHIAEqB2vDqHR0w6kKAhgC&p=3&articleId=i0003&text=1

I asked ChatGPT

For a newspaper viewer I have to show IIIF elements. However they are of different size, but currently scaled to some fixed column with (100%). I would like to compute a relative width that uses the largest image part as 100% and scales all others relative to the IIIF dimensions. 
Here is a shorter title: 
<div class="py-3"><img src="https://iiif.eluxemburgensia.lu/image/iiif/2/ark:70795%2f28j4xc%2fpages%2f3/583,1327,245,57/full/0/default.png" style="width: 100%;"></div>

Here is an image with a longer text lines: 
<img src="https://iiif.eluxemburgensia.lu/image/iiif/2/ark:70795%2f28j4xc%2fpages%2f3/138,1416,1144,2221/full/0/default.png" style="width: 100%;">
How can I compute from IIIF dimensions the scaling for the shorter lines?

Here is what ChatGPT suggests:

To compute the relative width of IIIF images based on their dimensions and scale them relative to the largest image part, you will first need to understand the dimensions of each image, and then apply a scaling factor based on the width of the largest image. This allows each image to be displayed proportionally in a viewer where the largest image defines the full width.

Here are the steps to compute and apply this scaling:

1. Retrieve the Image Dimensions

Each IIIF URL provides a hint to the dimensions of the image through its path. In the examples you provided, the dimensions are specified in the URL segment that looks like x,y,width,height. For example:

For the shorter title: 583,1327,245,57
For the image with longer text lines: 138,1416,1144,2221

This indicates the image part width as 245 pixels for the shorter title and 1144 pixels for the longer text lines.

2. Determine the Largest Image Width

From the dimensions you retrieve, determine the largest width. In your example, that would be 1144 pixels from the longer text lines.

3. Calculate Scaling Factor

The scaling factor for each image is calculated by dividing the width of each image by the width of the largest image. This factor will then be used to set the relative widths in CSS or HTML.

4. Apply the Scaling Factor

You can apply the scaling factor directly in your HTML by adjusting the width style property. Here is how you can compute and apply it:

Computation

Shorter title image width: 245 pixels
Longer text lines image width: 1144 pixels

Scaling

For the shorter title: [ \text{Scaling Factor} = \left(\frac{245}{1144}\right) \times 100\% \approx 21.41\% ]

HTML Implementation

Adjust the width style attribute in your HTML to reflect these scaling factors:

<div class="py-3">
  <img src="https://iiif.eluxemburgensia.lu/image/iiif/2/ark:70795%2f28j4xc%2fpages%2f3/583,1327,245,57/full/0/default.png" style="width: 21.41%;">
</div>

<img src="https://iiif.eluxemburgensia.lu/image/iiif/2/ark:70795%2f28j4xc%2fpages%2f3/138,1416,1144,2221/full/0/default.png" style="width: 100%;">

5. Conclusion

This approach ensures that all images are scaled proportionally relative to the largest image, making the visual representation coherent and visually balanced. This method also keeps the aspect ratio of the images intact, which is important for readability and aesthetics in your newspaper viewer.

Applying the 21% in the browser gives:

danieleguido commented 5 months ago

Hi @simon-clematide , on it!