My app’s widget is meant to display a random quote each day. The length of the quote varies. However, the idea is that words should never be broken. Here’s the small widget view:
ZStack {
Rectangle()
.fill(LinearGradient(colors: [Color("widget-top"), Color("widget-bottom")], startPoint: .top, endPoint: .bottom))
ZStack (alignment: .bottomTrailing) {
Image("curve")
.resizable()
.scaledToFit()
.opacity(0.2)
VStack (alignment: .leading) {
HStack (alignment: .firstTextBaseline, spacing: 3) {
Text(day)
.foregroundColor(.vprimary)
.fontWeight(.medium)
Text(month)
.foregroundColor(.gray)
Spacer()
}
.font(.subheadline)
.frame(maxWidth: .infinity)
Spacer()
Text(quote.first?.title ?? "")
.foregroundColor(.primary)
.fontWeight(.medium)
.minimumScaleFactor(0.5)
.truncationMode(.tail)
.multilineTextAlignment(.leading)
.padding(.leading, 7)
.background(leftBorder)
Spacer()
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
}
.padding()
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
}
var leftBorder: some View {
HStack (alignment: .top) {
Rectangle()
.frame(width: 2)
.foregroundColor(Color("vpurple"))
Spacer()
}
}
However, this is what the widget looks like today:
You probably can’t tell, but the first word is broken and the last 3 characters are moved to a second line. I would much rather the font size was reduced in order to fit a word’s characters into the widget width.
Could you help me with this, please?