Делаем неразрывные числа в динамическом тексте

Отображение динамически отформатированных чисел в строках для пользователя является распространённой фичей во многих iOS-приложениях. Ценники, остатки на счёте, минимальные/максимальные суммы и другие числовые значения часто отображаются в составе длинных предложений. Хотя эти строки обычно отображаются корректно, проблемы начинают возникать, когда большое число не помещается на одной строке.

Типичным примером является экран, где пользовательский интерфейс должен адаптироваться как к коротким, так и к длинным числам. Если число достаточно большое, система может разбить его на несколько строк, оставив часть на одной строке, а остаток перенести на следующую. Это создаёт неровный визуальный результат и может затруднить чтение числа.

В случаях, когда число всегда должно оставаться визуально атомарным — цены, денежные суммы, идентификаторы или любые числовые значения, отформатированные с помощью разделителей групп, — необходимо предотвратить разбиение числа на строки. Именно здесь неразрывные пробелы становятся полезными.

Почему числа разбиваются на строки

По умолчанию движки текстовой вёрстки считают стандартные пробелы допустимыми точками разрыва. Форматированное число, такое как 12 345 678, содержит обычные пробелы между группами цифр. Когда текст больше не помещается в доступную ширину, движок вёрстки может вставить перенос строки после любого из этих пробелов, что приведёт к следующему результату:

Minimum deposit amount is $12 345
678.

Хотя технически это правильно, с точки зрения пользовательского опыта это нежелательно. Пользователи визуально воспринимают отформатированное число как единое целое, а его разделение ухудшает читаемость.

Использование неразрывных пробелов

Простой и надёжный способ предотвратить эту проблему — заменить обычные пробелы внутри числового значения неразрывными пробелами (\u{00A0}). Это даёт команду движку вёрстки разместить всё число на одной строке и при необходимости переместить его целиком.

Небольшое расширение позволяет легко внедрить это в кодовую базу:

extension String {
    var nonBreakingSpaces: String {
        replacing(" ", with: "\u{00A0}")
    }
}

Если ваша логика форматирования создаёт значения вроде 12 345 678, применение этого модификатора гарантирует, что число не будет разбито при переносе строк.

Пример из реальной жизни

Рассмотрим строку, используемую в банковских или финансовых приложениях:

"The maximum loan amount you can request is %@."

Значение вставляется динамически и может значительно варьироваться. При длинных числах перенос строк по умолчанию может привести к визуальной несогласованности макета.

Применение подхода с неразрывными пробелами:

let formatted = minSum.formattedGrouped.nonBreakingSpaces
let text = String(format: "The maximum loan amount you can request is %@.", formatted)

Или вы можете использовать что-то вроде этого:

import SwiftUI

// MARK: - Helpers

extension String {
    /// Replaces regular spaces with non-breaking spaces to keep the number on one line.
    var nonBreakingSpaces: String {
        replacingOccurrences(of: " ", with: "\u{00A0}")
    }
}

// Example formatter for grouped numbers
extension Int {
    var formattedGrouped: String {
        let formatter = NumberFormatter()
        formatter.numberStyle = .decimal
        formatter.groupingSeparator = " "
        return formatter.string(from: NSNumber(value: self)) ?? "\(self)"
    }
}

// MARK: - View Example

struct ContentView: View {

    private let veryLargeNumber = 987_321_000

    var body: some View {
        VStack(alignment: .leading, spacing: 50) {
            Text("Total distance covered: \(veryLargeNumber.formattedGrouped.nonBreakingSpaces) km")
            
            Text("Total distance covered: \(veryLargeNumber.formattedGrouped) km")
        }
        .frame(maxWidth: .infinity, alignment: .leading)
        .padding()
        .fontWeight(.bold)
        .font(.title)
        .multilineTextAlignment(.leading)
    }
}

Заключение

Неразрывные пробелы — простой и эффективный способ сохранения целостности числовых значений в динамическом тексте.